HTML 밑줄을 더 두껍게 만들 수있는 방법이 있습니까?

Question

중첩 된 h1이있는 가운데 div가 있습니다. HTML 기본보다 두꺼운 선으로 밑줄을 긋는 방법이 있습니까?

Answer 1

내가 인라인 CSS를 추천하고 있지 않다 그러나 간결 여기를 사용하고 있습니다 :

<h1 style="border-bottom: 5px solid black"> 

Answer 2

당신은 국경 바닥 폭과 같은 시각적 효과를 얻을 수 있습니다;

h2 
{ 
    border-bottom-color:black; 
    border-bottom-style:solid; 
    border-bottom-width:15px; 
}d 

Answer 3

이것은 당신이 U 태그의 밑줄을 제어 할 것이다 : 밑줄 네 개의 픽셀이됩니다이 경우

<style type="text/css"> 
    u { 
    text-decoration: none; 
    border-bottom: 4px solid black; 
    } 
</style> 

합니다.

Answer 4

아니요, 없습니다. 밑줄의 두께는 브라우저에 따라 다르며 CSS (또는 HTML)에서 영향을받을 수 없습니다.

CSS3 텍스트 초안에 제안 된 text-underline-width 속성이있었습니다. 그러나 그것에 대한 관심은 충분하지 않았으며, 2005 년 초안에서 삭제되었습니다. 아마도 구현 된 적이 없었을 것입니다.

일반적인 해결 방법은 밑줄 대신 밑줄을 사용하는 것입니다. 그러나 그것은 다른 점에 유의하십시오. 아래쪽 테두리는 선 상자 아래에 있지만 밑줄은 일반적으로 텍스트의 기준선에 있으므로 글자의 자손을 자릅니다. 일반적으로 아래쪽 테두리는 밑줄보다 읽기 쉽습니다. 그러나 인쇄상의 전통을 벗어납니다.

다음 예제는 차이점을 보여줍니다. 당신은 항상 경계 바닥을 원하지 않기 때문에

<span style="text-decoration: underline">jgq</span> 
 
<span style="border-bottom: solid 1px">jgq</span> 
 
<span style="border-bottom: solid 4px">jgq</span>

Answer 5

(예를 들면, 항목이 패딩을 가질 수 있으며, 너무 멀리 나타납니다),이 방법은 가장 잘 작동합니다

h1:after { 
    content: ''; 
    height: 1px; 
    background: black; 
    display:block; 
} 

두꺼운 밑줄을 원한다면 더 추가하십시오 height

텍스트와 th 사이에 공간이 더 필요하면 전자 강조하는 margin-top 추가

h1:after { 
    content: ''; 
    height: 2px; 
    background: black; 
    display:block; 
    margin-top: 2px; 
}