Vertically centering content of :before/:after pseudo-elements

by

Assuming your element is not an <img> (because pseudo elements are not allowed on self-closing elements), let’s suppose it’s a <div>, so a way could be:

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

If you cannot change the line-height of the div, another way is:

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

Otherwise, just place the indicators as a background in center position.

More Related Contents:

  1. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  2. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  3. What is the difference between a pseudo-class and a pseudo-element in CSS?
  4. Can I target a :before or :after pseudo-element with a sibling combinator?
  5. Should I use single or double colon notation for pseudo-elements?
  6. Universal selector * and pseudo elements
  7. Can I have multiple :before pseudo-elements for the same element?
  8. Combine :after with :hover
  9. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  10. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  11. What is the difference between pseudo-classes and pseudo-elements?
  12. Combine CSS Attribute and Pseudo-Element Selectors?
  13. Is there a CSS parent selector?
  14. Complex CSS selector for parent of active child [duplicate]
  15. Select every Nth element in CSS
  16. CSS Selector that applies to elements with two classes
  17. CSS selector based on element text? [duplicate]
  18. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  19. Handling a colon in an element ID in a CSS selector [duplicate]
  20. CSS selector for attribute names based on a wildcard
  21. IE8 :nth-child and :before
  22. CSS selector to select first element of a given class
  23. Can I use variables for selectors?
  24. CSS: styled a checkbox to look like a button, is there a hover?
  25. CSS Selector for
  26. How can I apply styles to multiple classes at once?
  27. Multiple descendant children selector with css [duplicate]
  28. What CSS selector can be used to select the first div within another div
  29. CSS Selector for not a child of element type?
  30. CSS selector based on width?

Leave a Comment