Skip underlining counter

Question

I am trying to underline the headings (h2/h3 elements) for my page, but I also want them numbered. How can I skip underlining the numbers? So I want it to look like

1. <u>First heading</u>

rather than

<u>1. First heading</u>

How should I modify my code?

h2 {
    text-decoration: underline;
      text-decoration-color:#222;
      text-decoration-skip-ink:initial;
      color:#564;
}

h3 {
  text-decoration-color:#856;
  color:#333;
}
h1 {
        counter-reset: h2counter;
    }
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
        text-decoration:none;
    }

It's easy is you wrap the contents of all your headers inside a ``, then you can apply the `text-decoration` to the `` only. But I suppose you want to avoid that... — julien.giband, May 07 '21 at 08:36

score 2 · Accepted Answer · answered May 07 '21 at 08:42

Just add display: inline-block to the ::before pseudo-element

h2 {
  text-decoration: underline;
  text-decoration-color: #222;
  text-decoration-skip-ink: initial;
  color: #564;
}

h3 {
  text-decoration-color: #856;
  color: #333;
}

h1 {
  counter-reset: h2counter;
}

h2::before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
  counter-reset: h3counter;
  text-decoration: none;
  display: inline-block;
}

<h2>Test</h2>

Meysam Asadi · Answer 2 · 2021-05-07T11:03:46.440

I moved the line below h2 a bit in the following code.

h2 {
  position: relative;
  text-underline-offset: 5px;
  color: #564;
}

h2:after {
  font-size: 1rem;
  position: absolute;
  width: 100%;
  height: 100%;
  white-space: pre;
  text-decoration-skip-ink: none;
  text-decoration-line: underline;
  left: 20px;
  top: 10px;
  color: white;
  z-index: -1;
  text-decoration: underline;
  text-decoration-color: black;
  content: attr(data-name);
}

h3 span {
  text-decoration-line: underline;
  text-underline-offset: 5px;
  color: #564;
}

<h2 data-name="1. First heading------">1. First heading</h2>
<h2 data-name="2. Second heading--------">2. Second heading</h2>


<h1 style="margin-top:100px;">With Span</h1>

<h3>1. <span>First heading</span></h3>

Skip underlining counter

2 Answers2