물결 모양의 밑줄

Question

나는이 같은 물결 모양의 밑줄을 만들 수 :
가 난 단지 고체 경계를 얻을 수 있습니다 :

.err { 
 
    border-bottom:1px solid red; 
 
    display: inline-block; 
 
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

Answer 1

에 대한 not fully supported입니다 :

: 배경 이미지

.err { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.err:before { 
 
    content: "~~~~~~~~~~~~"; 
 
    font-size: 0.6em; 
 
    font-weight: 700; 
 
    font-family: Times New Roman, Serif; 
 
    color: red; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 12px; 
 
    left: -1px; 
 
    overflow: hidden; 
 
}

<div>A boy whose name was Peter was 
 
    <div class="err">woking</div> down the street</div>

.err { 
 
    display: inline-block; 
 
    position:relative; 
 
    background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x; 
 
}

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>

Answer 2

당신은 CSS text-decoration-style 속성을 사용할 수 있습니다.

-webkit-text-decoration-style: wavy; 
-moz-text-decoration-style: wavy; 
text-decoration-style: wavy; 

그러나, this is limited to Firefox and Safari. 대신 이미지 사용을 고려해야 할 수도 있습니다.

Answer 3

링크에 :after 가상 요소를 사용하고 웨이브 이미지의 repeat-x 배경을 설정할 수 있습니다. 또한 border-image CSS3 속성을 사용할 수 있지만,이 배경 이미지없이 오래된 브라우저

Answer 4

다음은 이미지없이이를 달성 할 수있는 방법 중 하나의 예입니다. 필요에 따라 조정하십시오.

.err { 
 
    border-bottom:2px dotted red; 
 
    display: inline-block; 
 
    position: relative; 
 

 
} 
 

 
.err:after { 
 
    content: ''; 
 
    width: 100%; 
 
    border-bottom:2px dotted red; 
 
    position: absolute; 
 
    font-size: 16px; 
 
    top: 15px; /* Must be font-size minus one (16px - 1px) */ 
 
    left: -2px; 
 
    display: block; 
 
    height: 4px; 
 

 
    
 
    }

<div>A boy whose name was Peter was <div class="err">woking</div> down the street</div>