CSS '밑줄'속성의 선 두께 편집

다음과 같이 CSS의 모든 텍스트에 밑줄을 긋을 수 있습니다.

H4 {text-decoration: underline;}

그런 다음 그려지는 '선'도 편집 할 수 있습니다. 선에 표시되는 색은 '색상 : 빨간색'으로 쉽게 지정되지만 선의 높이, 즉 두께는 어떻게 편집합니까?

이를 달성하는 한 가지 방법은 다음과 같습니다.

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS :

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

예 : http://jsfiddle.net/AQ9rL/

최근에 나는 밑줄이 너무 두껍고 FF의 텍스트에서 너무 멀리있는 FF를 다루어야했고, 한 쌍의 상자 그림자를 사용하여 더 나은 방법을 찾았습니다.

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

첫 번째 그림자는 두 번째 그림자 위에 놓이고 두 번째 그림자는 둘 다의 'px'값을 변경하여 제어 할 수 있습니다.

플러스 : 다양한 색상, 두께 및 밑줄 위치

마이너스 : 단색이 아닌 배경에는 사용할 수 없습니다.

여기에 몇 가지 예제를 만들었습니다. http://jsfiddle.net/xsL6rktx/

매우 쉽습니다 ... 작은 글꼴과 밑줄이있는 외부 "span"요소와 더 큰 글꼴 크기를 가진 "font"요소 내부.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

이를 수행하는 또 다른 방법은 밑줄을 긋고 자하는 요소에 ": after"(의사 요소)를 사용하는 것입니다.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

이 text-decoration-thickness부분은 현재, CSS 텍스트 장식 모듈 레벨 4 . "Editor 's Draft"단계에 있으므로 진행중인 작업이며 변경 될 수 있습니다. 2020 년 1 월 부터는 Firefox 및 Safari에서만 지원됩니다 .

text-decoration-thickness CSS 속성은 라인 스루, 밑줄 또는 윗줄과 같은 요소의 텍스트에 사용되는 장식 선의 두께 또는 너비를 설정합니다.

a {
  text-decoration-thickness: 2px;
}

Codepen : https://codepen.io/mrotaru/pen/yLyLOgr(Firefox 전용)

도 있습니다 text-decoration-color의 일부인 CSS 텍스트 장식 모듈 레벨 3 . 이것은 더 성숙하고 (후보 권장 사항) 대부분의 주요 브라우저에서 지원됩니다 (예외는 Edge 및 IE). 물론 선의 두께를 변경하는 데 사용할 수는 없지만 좀 더 "음소거 된"밑줄을 만드는 데 사용할 수 있습니다 (코드 펜에도 표시됨).

다음과 같이 간단한 작업을 수행합니다.

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• line-height또는 padding-bottom을 사용 하여 둘 사이의 위치를 ​​설정할 수 있습니다.
• display: inline어떤 경우에는 사용할 수 있습니다

데모 : http://jsfiddle.net/5580pqe8/

은 background-image또한 밑줄을 만드는 데 사용할 수 있습니다.

아래로 이동하고 background-position수평으로 반복해야합니다. 선 너비는를 사용하여 어느 정도 조정할 수 있습니다 background-size(배경은 요소의 콘텐츠 상자로 제한됨).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

최종 솔루션 : http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

새로운 CSS 옵션 의 마법 덕분에 이제 기본적으로 가능합니다.

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

아직 지원은 상대적으로 열악 합니다. 그러나 결국 ff 이외의 다른 브라우저에 착륙 할 것입니다.

내 솔루션 : https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

선 높이 값, 밑줄 두께 및 테두리 하단 스타일로 밑줄 위치를 조정할 수 있습니다.

href에 밑줄을 긋고 싶다면 기본 밑줄 동작을 사용하지 않도록주의하십시오.