CODEWITHSUNDEEP
csscenteringpseudo-element
jcubic
jcubic

Reputation: 66650

How to center text inside :before pseudo element?

I have code like this:

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -29px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

How can I center the text inside :before pseudo element to be in the middle of the span? Is it possible?

Upvotes: 13

Views: 27639

Answers (9)

Sathya K
Sathya K

Reputation: 1

.anda {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        border: 1px solid rgb(55, 26, 26);
        background-color: aqua;
        border-radius: 100%;
      }
      .anda::before {
        content:attr(data-text);
        color: #fff;
        position: absolute;
        width: 150px;
        height: 150px;
        background: rgb(55, 26, 26);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
<div class="anda" data-text="HTML5">

Upvotes: 0

Ullas
Ullas

Reputation: 1

Doing this always works for me:

put some content in the element first and the change in the z-index property of it in the CSS

Example:

Your HTML file

<p>some content</p>

Your CSS file

p{
  z-index:10;
}

p::after{
  content:'';
  /*rest of the code*/
}

/*use z-index as per your requirements*/

Upvotes: -2

O&#39;talb
O&#39;talb

Reputation: 131

In my case I needed to center horizontally an html symbol inside pseudo's content element,so I used line-height property :

details summary::after{
    content: "›";
    border-radius: 100%;
    position: absolute;
    color: #64C1E3 ;
    right: 10px;
    top: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    z-index: 1;
    border: 1px solid #64C1E3;
    transform: rotate(90deg);
    justify-content: center;
    font-size: 30px;
    line-height: 14px;
    font-family: emoji;
    transition: .5s;
}

Upvotes: 0

kukkuz
kukkuz

Reputation: 42370

The best thing would be to position the before pseudo element absolutely with respect to the span using the popular centering technique:

top: 0;
left: 50%;
transform: translate(-50%, -25px);

Note that -25px is to offset the text above the circles (which has height 25px) - see demo below:

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
  position:relative;
}
span:before {
  content: attr(data-value);
  position: absolute;
  white-space: pre;
  display: inline;
  top: 0;
  left: 50%;
  transform: translate(-50%, -25px);
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Source

Upvotes: 18

ashuvssut
ashuvssut

Reputation: 2305

We should use LOGICAL CODE and not any hit and trail and playing around with numbers!

I used flex in the pseudo element to center it first upon the span element.

Then i used transform to Logically position the pseudo element.

/*styling to just make the presentation look good*/
body{
  border:5px solid black;
  padding:50px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

/* main stylings start here*/
span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  width:150px;
  border:solid black 1px;
  
  /*use flex to center it to middle & upon the span*/
  display:flex;
  justify-content:center;
  align-items:center;
  
  /*use transform and position it LOGICALLY (by considering border widths of the parent span and ofcourse using calc() )*/
  transform: translate(calc(-50% + 2 * 6px), calc(-100% - 6px));
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

I would request to use LOGICAL Code rather than design-breaking hit and trail values. Write Responsive Code. Happy Coding!

Upvotes: 2

Oriol
Oriol

Reputation: 288680

I recommend against using negative translations. It might end up outside the viewport if you don't do it enough carefully.

Moreover, you shouldn't insert contents with pseudo-elements. Pseudo-elements should only be used for styling purposes. Like this:

body {
  display: inline-block;
}
span {
  display: block;
  text-align: center;
}
span:after {
  content: '';
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 10px auto 30px;
  display: block;
}
<span>November 2016</span>
<span>May 2016</span>

The text inside the span is centered due to text-align: center.

The pseudo-element circle is centered due to margin-left: auto and margin-right: auto.

Upvotes: 2

jafarbtech
jafarbtech

Reputation: 7025

Add display:inline-block; and add margin-left:-87px. where 87px derived from

100px(50% of whole width 200px)-13px(50% of span width 25px)

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline-block;
  top: -27px;/*
  left: -29px;*/  
  margin-left: -87px;
  width: 200px;
  text-align: center;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Upvotes: 0

Chris Peacock
Chris Peacock

Reputation: 4706

I was beaten to this, but here is my solution:

span {
   border-radius: 50%;
   background-color: #d8d9dd;
   border: 6px solid #262c40;
   width: 25px;
   height: 25px;
   margin: 30px 0 0 40px;
   display: block;
}
span:before {
   content: attr(data-value);
   position: relative;
   white-space: pre;
   display: inline-block;
   top: -27px;
   left: -50px;
   width: 125px;
   text-align: center;
}

The changes are to use inline-block display on the :before style and to adjust the left and width of the text.

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 238115

From MDN:

[the :before pseudo-element] is inline by default

Giving inline elements a width does nothing, so you need to style it as display: block (or inline-block if that is more appropriate). It also turns out that you need to adjust the left value to approximately -88px to get the text centred over the circle.

span {
  border-radius: 50%;
  background-color: #d8d9dd;
  border: 6px solid #262c40;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 40px;
  display: block;
}
span:before {
  content: attr(data-value);
  position: relative;
  white-space: pre;
  display: inline;
  top: -27px;
  left: -88px;
  width: 200px;
  text-align: center;
  display: block;
}
<span data-value="November 2016"></span>
<span data-value="May 2016"></span>

Upvotes: 4

Related Questions