How to position a pseudo-element to underline text

HTML & CSS
#1

Hi,

I am currently working on my personal website to practice my coding and I recently discovered the potential of pseudo elements for design.

I would like to use a pseudo-element to underline a text.

I could successfully design a pseudo-element to underline my title but I have some problem to properly position it under my text.

<div class="Resume">

  <div class="Education">

    <h2>Education</h2>

    <ul>
      <li>Education #1</li>
      <li>Education #2</li>
      <li>Education #3</li>
    </ul>
  </div>

  <div class="Experience">

    <h2>Experience</h2>

    <ul>
      <li>Experience #1</li>
      <li>Experience #2</li>
      <li>Experience #3</li>
    </ul>
  </div>
</div>

.Resume {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

.Resume h2 {
    font-size: 40px;
    padding: 50px;
    letter-spacing: 4px;
    font-weight: bold;
    text-transform: uppercase;    
}

/* Pseudo element line */
/* Reaadpt line under education experience */
.Resume h2::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #7D7465;
    height: 10px;
    width: 20%;
}

Online CodePen Code

I tried using left-right / top-bottom but it does not work and cannot properly position it under my text.
Thank you in advance for your help.

#2

If you make the h2 content width by using a shrink to fit display type such as display:inline-flex then you can use left and right on the pseudo element to match exactly the width of the text (plus its padding) without using a magic number like 20%.

Change your 2 rules as follows.

.Resume h2 {
  font-size: 40px;
  padding: 50px;
  letter-spacing: 4px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex; /* shrink to fit*/
  margin: 0;
  position:relative;/* stacking context for pseudo element */
}

/* Pseudo element line */
/* Reaadpt line under education experience */
.Resume h2::after {
  content: "";
  /*display: block; not needed when position:absolute used in this case*/
  position: absolute;
  background-color: #7d7465;
  height: 10px;
  bottom:20px;
  left: 0;/* match width of text and padding*/
  right: 0;/* match width of text and padding*/
  /* width: 20%;*/
}

Screen Shot 2022-05-27 at 12.05.59

If you want the line only under the text then use left:50px and right:50px to match your padding (or indeed remove left and right padding).

Screen Shot 2022-05-27 at 12.10.19

To avoid errors I suggest that you use lower case in your rules rather than saying .Resume use .resume instead. It just makes life easier :slight_smile:

There are other ways to get the underline but I assume you were just practicing with the pseudo element anyway :slight_smile:

1 Like
#3

Hi PaulOB,

Thanks again for your help and the explanation.

Yes, in a previous post you suggested that I should give up CamelCase in my code. As I already started my code using it, I’m going to finish my website, then clean/polish my code and get rid of all CamelCase.

Yes you are right, I decided to use this approach to learn new things, especially use of pseudo-elements.

Thanks again for your help,

1 Like
#4

Just to clearify

.Resume is NOT camelCase and I will always ask people to use camelCase because it is much easier to read. But of course you should use if correct. the first character is always lower case not upper case.

1 Like
#5

Although I have previously used camelCase in css my current approach is to use a hyphen instead and keep camelCase for JS only. I find that makes me more consistent.

In the end it’s purely a matter of choice but whatever you choose you need to stick to the plan and not go off piste:)