Achieving vertical centering for content within :before/:after pseudo-elements

Question

Achieving vertical centering for content within :before/:after pseudo-elements

I'm striving to replicate a similar layout as shown in the image:

Within a div element containing an image as part of a slideshow, I have utilized :before and :after pseudo-elements to create controls for navigating to the next (>>) or previous (<<) images within the slideshow.

Currently, my code looks like this:

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

However, I am facing difficulties in centering the content of the pseudo-elements. The text is not aligning properly:

Is there a method to achieve this alignment? If not, what would be the most appropriate workaround while maintaining semantic integrity? I am aiming to centrally align the content within the element without impacting the element itself. Ideally, I would like the element to stretch to 100% height.

Edit: http://jsfiddle.net/rdy4u/

Edit2: Additionally, the image is fluid in nature, with unknown heights for both the div and img elements. The width has been set to 800px with a max-width of 80%.

css css-selectors pseudo-element

Answer 1

Answer №1

Let's say your element is not an <img> (since pseudo elements are not allowed on self-closing elements), for example a <div>, one approach could be:

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

If changing the line-height of the div is not possible, another method 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: ...
}

Alternatively, you can position the indicators as a background in the center.

Answer 2

Let's say your element is not an <img> (since pseudo elements are not allowed on self-closing elements), for example a <div>, one approach could be:

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

If changing the line-height of the div is not possible, another method 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: ...
}

Alternatively, you can position the indicators as a background in the center.

Answer 3

Answer №2

Implementing flex into the pseudo element's CSS is quite simple:

.parent::after {
  content: "Text for Pseudo Child";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  border: 1px solid red;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

Visit https://jsfiddle.net/w408o7cq/ for more details.

Answer 4

Implementing flex into the pseudo element's CSS is quite simple:

.parent::after {
  content: "Text for Pseudo Child";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  border: 1px solid red;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

Visit https://jsfiddle.net/w408o7cq/ for more details.

Answer 5

Answer №3

To utilize flexbox effectively, start by defining a specific width and height for the parent element.

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 6

To utilize flexbox effectively, start by defining a specific width and height for the parent element.

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 7

Answer №4

Although I may be arriving late to the gathering, this straightforward flex method proved to be incredibly effective for me. Hopefully it can provide assistance to others as well.

.container {
    display: flex;
    align-items: center;
}

.my-element:before, .my-element:after {
    /* The content here will be centered vertically in relation to the container */
}

Answer 8

Although I may be arriving late to the gathering, this straightforward flex method proved to be incredibly effective for me. Hopefully it can provide assistance to others as well.

.container {
    display: flex;
    align-items: center;
}

.my-element:before, .my-element:after {
    /* The content here will be centered vertically in relation to the container */
}

Answer 9

Answer №5

Avoid using images for this task. (Although font icons may require it inside :before or :after).

div {
   position: relative;
   overflow:hidden;
}

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%);

   height:20000px;
   line-height:20000px;

   content: ">>";
}

It might seem a bit unconventional to use 20000px If the div size exceeds that, adjust accordingly.

If you have an image within the div, ensure it has display:block applied (since images are not inherently block elements)

Check out the updated fiddle specific to your scenario. http://jsfiddle.net/rdy4u/56/

Answer 10

Avoid using images for this task. (Although font icons may require it inside :before or :after).

div {
   position: relative;
   overflow:hidden;
}

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%);

   height:20000px;
   line-height:20000px;

   content: ">>";
}

It might seem a bit unconventional to use 20000px If the div size exceeds that, adjust accordingly.

If you have an image within the div, ensure it has display:block applied (since images are not inherently block elements)

Check out the updated fiddle specific to your scenario. http://jsfiddle.net/rdy4u/56/

Answer 11

Answer №6

If you want to create next and previous controls, you can use the :before and :after pseudo-elements along with a border trick to generate triangles for the buttons. While this method may not provide a clickable area that is 100% of height, enlarging the size of the triangle (arrows) should compensate for that.

.container {
  position: relative;
  width: 800px;
  max-width: 80%;
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
}

.container:before,
.container:after {
  opacity: 0.5;
  display: block;
  content: "";
  position: absolute;
  width: 0; 
  height: 0;
}

.container:before {
  top: 40%; left: 0;
  border-top: 25px solid transparent; 
  border-right: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

.container:after {
  top: 40%; right: 0;
  border-top: 25px solid transparent; 
  border-left: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

See the code in action here: http://jsfiddle.net/fiddleriddler/rPPMf/

Answer 12

If you want to create next and previous controls, you can use the :before and :after pseudo-elements along with a border trick to generate triangles for the buttons. While this method may not provide a clickable area that is 100% of height, enlarging the size of the triangle (arrows) should compensate for that.

.container {
  position: relative;
  width: 800px;
  max-width: 80%;
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
}

.container:before,
.container:after {
  opacity: 0.5;
  display: block;
  content: "";
  position: absolute;
  width: 0; 
  height: 0;
}

.container:before {
  top: 40%; left: 0;
  border-top: 25px solid transparent; 
  border-right: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

.container:after {
  top: 40%; right: 0;
  border-top: 25px solid transparent; 
  border-left: 50px solid blue; 
  border-bottom: 25px solid transparent;
}

See the code in action here: http://jsfiddle.net/fiddleriddler/rPPMf/

Achieving vertical centering for content within :before/:after pseudo-elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Choosing a dropdown option with a CSS Selector

Turn off scrolling for the body content without removing the scrollbar visibility

Numerous sections of content

What's the reason the bootstrap tooltip style isn't displaying?

Is it feasible to have a set number of character lines per <p> tag without relying on monospaced fonts?

What steps can be taken to enlarge the select button within a <select> field?

Troubleshooting Problem with CSS Display in Spring Security 3.2

Tips for utilizing the sticky-top class with Bootstrap 4 grid system

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

Overflow error in Rsuite table row cannot be displayed

Using MaterialUI to create a GridListTile with two IconButtons

Developing a hovercard/tooltip feature

Can you provide guidance on configuring the image class within a DOM element using echo?

Utilize the Bootstrap column push-pull feature on the mobile version of

The primefaces codeMirror is failing to properly load its own CSS and JavaScript files

Display issue with alert box

I am experiencing an issue where the left sidebar div is not aligning correctly in my HTML

Image broken on default bootstrap navbar

When I hover over my divs, my span is positioned behind them

Using CSS to apply a gradient over an img element