밑줄의 길이를 중앙에 맞추고 변경하는 방법은 무엇입니까?

Question

나는 중간 부분에서만 밑줄이 쳐져야하는 텍스트를 가지고있다.

나는 fiddle을 만들었으며 밑줄은이 image에 표시된 것과 같이 중앙에 위치해야합니다.

내가 바이올린에 포함 된 한 CSS 코드는 다음과 같습니다이 여러 가지 방법을 수행 할 수 있습니다 더 많은 정보가 당신에게서 필요

.footer p 
{ 
    width: 50%; 
    border-bottom: 1px solid #f51c40; 
} 

Answer 1

당신은 절대적으로 위치 의사를 사용할 수 있습니다 필요가 같이 작동합니다 요소를 left: 50%; transform: translate(-50%);과 함께 사용하면 콘텐츠와 관련하여 자동으로 가로로 배치 할 수 있습니다.

.footer p { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.footer p:after { 
 
    content: ""; 
 
    height: 1px; 
 
    width: 50%; 
 
    background-color: red; 
 
    position: absolute; 
 
    bottom: -.5em; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
}

<div class="footer"> 
 
    <p>ADDITIONAL INFO</p> 
 
</div>

Answer 2

... 여기

하나의 방법 상단 꺼져 내 머리로하는 매우 정직

<div class="footer"> 
    <p>Add<u>ition</u>al</p> 
</div> 

또 다른 대안은 사용을 포함 할 것 .footer p:before 및/또는 :after 개의 psuedo 요소 ...

Answer 3

:: after 의사 요소를 사용할 수 있습니다. 어떤 가짜 elemts가 내가 당신을 추천하는지 모른다면 CSS의 매우 중요한 부분 인 learn about them here을 자주 사용하게 될 것입니다. :: after 의사 요소는 특정 요소 뒤에 내용을 추가 할 수 있습니다.

당신은 예를 들어 P 요소 다음에 테두리를 만들 수 있습니다

:

.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}

Answer 4

그것은 당신이

footer p 
{ 
    width: 50%; 
} 

footer p:after { 
    content: ''; 
    border-bottom: 2px #000 solid; 
    position: absolute; 
    top:40px; 
    left: 30px; 
    width:100px; 
} 

https://jsfiddle.net/74zgg81d/1/

Answer 5

하는 CSS 의사 요소 ::after를 사용하여이 작업을 수행하는 가장 좋은 방법. 또한 display: inline-block 및 position: relative을 p 요소로 설정해야합니다.

아래 코드 조각 참조하십시오

.footer p { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.footer p::after { 
 
    content: ""; 
 
    width: 60px; 
 
    height: 3px; 
 
    background: black; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    bottom: -3px; 
 
}

<div class="footer"> 
 
    <p>ADDITIONAL INFO</p> 
 
</div>