CSS 밑줄에 숫자가있는 텍스트에 밑줄을 긋습니다.

Question

CSS에 html 또는 javascript를 사용하여 텍스트에 밑줄을 긋고 밑줄에 작은 숫자를 추가하려면 어떻게합니까?

Answer 1

:after이 이용 가능하다 : 가상 소자.

---

당신이 응답에 대한 백분율 단위로 div의 width을 설정하려면

div { 
 
    font-size: 15px; 
 
    width: 300px; 
 
    line-height: 30px; 
 
} 
 
span { 
 
    position: relative; 
 
} 
 
span:after { 
 
    position: absolute; 
 
    content: '2'; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 100%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    text-align: center; 
 
    font-size: 9px; 
 
    line-height: 15px; 
 
}

<div>over the <span>Triangle, a few months later,</span> another plane disappeared. A ship named the Sandra.</div>

, 당신은 white-space: pre을 설정하여 span에 줄 바꿈을 피할 수 있습니다. 아래 예에서 Fiddle

상기 width는이를 보여 25%로 설정되어있다. 또한

---

div { 
 
    font-size: 15px; 
 
    width: 25%; 
 
    line-height: 30px; 
 
} 
 
span { 
 
    position: relative; 
 
    white-space: pre; 
 
} 
 
span:after { 
 
    position: absolute; 
 
    content: '2'; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 100%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    text-align: center; 
 
    font-size: 9px; 
 
    line-height: 15px; 
 
}

<div>over the <span>Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>

, 당신은 HTML 요소에서 속성 값을 가져 CSS의 attr() 기능을 사용할 수 있습니다 : 의사 요소가 추가됩니다. @chipChocolates 당신이 CSS 스타일 블록에 첨자를 넣어하지 않으려면, 대답, 오히려 당신이 그들을 필요로 몸에서 사용할 사용

div { 
 
    font-size: 15px; 
 
    width: 50%; 
 
    line-height: 30px; 
 
} 
 
span { 
 
    position: relative; 
 
    white-space: pre; 
 
} 
 
span:after { 
 
    position: absolute; 
 
    content: attr(data-num); 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 100%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    text-align: center; 
 
    font-size: 9px; 
 
    line-height: 15px; 
 
}

<div>over the <span data-num="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>

Answer 2

...

div { 
 
    font-size: 15px; 
 
    width: 300px; 
 
    line-height: 30px; 
 
} 
 
span { 
 
    position: relative; 
 
    width: auto; 
 
    height: 15px; 
 
} 
 
span:after { 
 
    position: absolute; 
 
    content: attr(subscript-line); 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 100%; 
 
    left: 0; 
 
    border-top: 1px solid black; 
 
    text-align: center; 
 
    font-size: 10px; 
 
    line-height: 10px; 
 
}

<div>over the <span subscript-line="1">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div> 
 
<div>over the <span subscript-line="2">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div> 
 
<div>over the <span subscript-line="3">Triangle, a few months later</span>, another plane disappeared. A ship named the Sandra.</div>