如何使用文本字符（如短劃線，字母或數字）在CSS中創建邊框底部

Question

有沒有辦法從文本字符中創建底部邊框，例如我可以有「XXXXXXXXXXXXXXXXXX」或「---------------------」的border-bottom嗎？

據我所知，我可以創建一個使用CSS的重複圖像或規則（例如border-solid）的底部邊框。

我意識到我可以像border-bottom: thick dotted這樣做來達到虛線效果，但我希望邊框處於特定的字體中，這樣對我沒有任何幫助。

基本上，我想擁有的是，像這樣的自定義字體

這裏頭就是我開始：

h1 { 
    font-family: 'Special Elite', cursive; font-size: 2em; 
    padding-bottom: .2em; 
    border-bottom: ?????????; 
    margin-top: 0; 
    margin-bottom: 1.7em; 
} 

我可能要對這個錯誤的方式 - 任何幫助非常感謝。

Answer 1

你的想法似乎沒什麼問題（我看不出有任何CSS替代比使用圖像別的），你甚至可以用不同的顏色，可以通過文字陰影重複的長度開始：

h1 { 
 
    font-family: 'Special Elite', cursive; 
 
    position:relative; 
 
    overflow:hidden; 
 
    padding-bottom:0.5em; 
 
    } 
 
h1:after { 
 
    position:absolute; 
 
    line-height:0.5em; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    white-space:pre; 
 
    content:'-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  '; 
 
    text-shadow: 0.7em 0 tomato, 1.4em 0 turquoise; 
 
    } 
 
    
 
    hr + h1:after { 
 
    text-shadow: 0.7em 0.2em tomato, 1.4em -0.2em turquoise; 
 
    }

<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'> 
 
<h1>Unit 1 - Introductions</h1> 
 
<hr/> 
 
<h1>Up & down </h1>

codepen to play with

Answer 2

你可以使用僞元素:after

h1 { 
 
    font-size: 1em; 
 
    position: relative; 
 
    margin:50px 0 
 
} 
 
h1:after { 
 
    content: "-------------------------------------------------------------"; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    left: 0 
 
} 
 
.arial { 
 
    font-family: Arial 
 
} 
 
.cursive { 
 
    font-family: cursive 
 
}

<h1 class="arial">this has to be dashed underline</h1> 
 
<h1 class="cursive">this has to be dashed underline</h1>

Answer 3

我會建議使用的圖像，但如果你真的想用實際的字符，你可以做一些瘋狂的是這樣的：

@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700); 
 
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700); 
 
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface); 
 

 
body {font-family: 'Dancing Script', cursive;} 
 

 
h1 {color:red;} 
 

 
h1:after { 
 
content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; 
 
    width:99%; 
 
    overflow:hidden; 
 
    display: block; 
 
    font-size:10px; 
 
    white-space:nowrap; 
 
} 
 

 
h2 {color:orange; font-family: 'Anonymous Pro';} 
 
h2:before, h2:after { 
 
content:"=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-"; 
 
    width:99%; 
 
    overflow:hidden; 
 
    display: block; 
 
    font-size:10px; 
 
    white-space:nowrap; 
 
} 
 

 
h3 {font-family: 'Abril Fatface'; color:black; text-align: center;} 
 

 
h3:before, h3:after { 
 
content:"ABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZ"; 
 
    width:99%; 
 
    overflow:hidden; 
 
    display: block; 
 
    font-size:10px; 
 
    white-space:nowrap; 
 
    margin:10px auto; 
 
}

<h1>Damn, Border!</h1> 
 

 
<h2>Back at it again!</h2> 
 

 
<h3>ALL THESE LETTERS</h3>

的jsfiddle：https://jsfiddle.net/azizn/89og4bg2/

基本上，我們補充一點，作爲一個「邊界」的僞選擇，你可以任何你想要的樣式。添加overflow:hidden可以確保它不會創建奇怪的滾動條。

Answer 4

出乎所有人其他答案給：使用和SVG「形象」與任何文本要作爲邊框的使用方法：是的，使用CSS圖像的邊界，這是完全可能的。沿線的創建SVG：

<svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'> 
    <text x='0' y='...lineheight...'>xxxx...xxxxx</text> 
    <!-- and then use <g transform=...> to create three more 
     copies of this line, so that it acts as border --> 
<svg> 

然後用使用CSS邊框（開槽您的SVG代碼，不帶換行，進入...部分）：

.bordered { 
    border: 10px solid transparent; 
    border-image: url("data:image/svg+xml;utf8,...") 1 stretch; 
} 

還有我們走。我沒有做完整的SVG，但一個例子是這樣的：http://jsbin.com/xizuyuzode/edit?html,css,output

閱讀CSS圖像邊界語法，並玩弄SVG更好的結果。