2
A
回答
1
h1 {
display:inline-block;
position:relative;
padding-bottom:4px;
}
h1:before {
display:block;
content:"";
width:70%;
height:1px;
background:orange;
position:absolute;
left:50%;
bottom:0;
transform:translate(-50%);
}
h1:after {
display:block;
content:"";
width:20%;
height:4px;
background:orange;
position:absolute;
left:50%;
bottom:-4px;
transform:translate(-50%);
}
<h1>
Vijay Kumar
</h1>
3
可以使用:before
和:after
僞元素來創建在元件的底部兩條線,並使用position: absolute
放置它們。
h1 {
position: relative;
display: inline-block;
margin: 25px;
}
h1:after,
h1:before {
content: '';
position: absolute;
bottom: -2px;
height: 1px;
width: 60%;
left: 0;
background: #C0932E;
transform: translateY(100%);
}
h1:after {
height: 3px;
width: 30%;
}
.center:before,
.center:after {
left: 50%;
transform: translate(-50%, 100%);
}
.start:before {
width: 100%;
}
<h1 class="start">LOREM IPSUM</h1><br>
<h1 class="center">Lorem ipsum dolor.</h1>
0
試試這個:
h1 {
border-bottom: 2px solid orange;
width: 200px;
text-align: center;
position: relative;
}
h1:after{
content: '';
position: absolute;
width: 100px;
border-bottom: 3px solid orange;
top: 39px;
left: 50px;
}
<h1>This is Test</h1>
相關問題
- 1. 創建自定義WPF文本框
- 2. 創建自定義HTML文本框
- 3. 如何使用TextBlock創建自定義文本框?
- 4. 如何在自定義視圖上創建文本框
- 5. 如何在Windows Phone 7中創建自定義文本框?
- 6. 如何使用libgdx創建自定義文本框?
- 7. 如何使用標籤和值創建自定義文本框?
- 8. 如何創建自定義搜索框
- 9. 如何創建自定義對話框
- 10. R - 聚合縣地圖多邊形創建自定義邊框
- 11. 如何創建自定義的文本到語音引擎
- 12. 我如何顯示文本框旁邊的自定義異常?
- 13. 通過文本創建邊框並在文本週圍創建邊框
- 14. C#創建自定義自動完成文本框
- 15. 如何製作自定義文本框?
- 16. 如何使用自定義文本框
- 17. 如何自定義html表格邊框?
- 18. 如何創建自定義)
- 19. 如何在uitableview自定義單元格中將文本框對齊到右邊
- 20. 爲ListBox創建自定義文本值
- 21. 創建自定義文本塊
- 22. 如何用虛線邊框或雙線邊框創建文本框
- 23. 如何使用傾斜邊框創建文本框和標籤?
- 24. 如何在多個文本框中創建底線邊框
- 25. 如何使用自定義文本創建apprequest,如MyCalendar?
- 26. MVC3文本框 - 創建自定義寬度
- 27. 如何爲PAssword類型設置自定義文本框的邊框?
- 28. iPhone - 創建自定義的UITableViewCell頂部和底部邊框
- 29. 刪除邊框編程方式創建自定義按鈕
- 30. 使用CSS創建自定義邊框,只顯示角落