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

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;

}

---

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

.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>

---

Final Solution: http://codepen.io/vikrant-icd/pen/gwNqoM

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

---

My Solution : https://codepen.io/SOLESHOE/pen/QqJXYj

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

You can adjust underline position with line-height value, underline thickness and style with border-bottom.

Beware to disable default underline behavior if you want to underline an href.

참고URL : https://stackoverflow.com/questions/13840403/edit-line-thickness-of-css-underline-attribute