8 – Manage Display Field Label not changing: inline does not work


I used Firefox Developer Edition tools to find the relevant css code in a working theme.
I copy/pasted this piece of code into the styles.css file of the theme of my choice and adjusted the class-names (single dash instead of double-dash and double-underscore).

To tidy up I should make a subtheme with my adjustments and leave the theme as it is.

I made even a little improvement to the original code: label will be aligned to left of the column and content to the right (I am using Display Suite to divide the content into a column view)

.field-label {
  font-weight: bold;
.field-label-inline .field-label {
  float: left; /* LTR */
.field-label-inline .field-items {
  float: right; /* LTR */
.field-label-inline .field-label,
.field-label-inline > .field-item,
.field-label-inline .field-items {
  padding-right: 0.5em;
(dir="rtl") .field-label-inline .field-label,
(dir="rtl") .field-label-inline .field-items {
  padding-left: 0.5em;
  padding-right: 0;
.field-label-inline .field-label::after {
  content: ':';