1
A
回答
2
轉化的僞元素可以用來創建此:
body { text-align: center; }
.text {
display: inline-block;
vertical-align: top;
padding-bottom: 10px;
position: relative;
text-align: center;
padding: 20px 10px;
line-height: 24px;
min-width: 100px;
background: #333;
font-size: 20px;
color: #fff;
}
.text::before {
transform: translateX(-50%);
border-radius: 100%;
position: absolute;
background: blue;
bottom: 10px;
height: 8px;
content: '';
width: 8px;
left: 50%;
}
<div class="text">about</div>
0
.char {
display: inline-block;
position: relative;
}
.char::before {
content: '.';
display: inline-block;
position: absolute;
bottom: -0.5em;
left: 0;
text-align: center;
width: 100%;
}
堆棧寫了這個問題後,我想出了主意:)其作品excatly像我想:)
相關問題
- 1. 如何在WPF中創建一個帶圓圈的圓圈?
- 2. 創建一個由小圓圈組成的擴展圓圈
- 3. 如何在XML中的實心圓圈內繪製小圓圈/圓點?
- 4. 在圓圈內添加文本並在圓圈中添加小標題(HTML/CSS)
- 5. 用文字創建CSS3圓圈
- 6. 小圓圈
- 7. 如何創建unity3d向下橢圓形圈的道路?
- 8. 在圓圈下方添加文本以便與圓圈一起使用
- 9. 如何在iOS中爲不等大小的圓圈創建圓圈包裝算法?
- 10. 如何使用KineticJS從一個圓圈創建箭頭到另一個圓圈?
- 11. 如何創建多圈圓環圓餅圖?
- 12. 在C中連續創建圓圈#
- 13. 在ActionScript 3中創建10個圓圈
- 14. 點存在於圓圈
- 15. 如何使用畫布從圓圈內的字符串文本創建位圖?
- 16. jQuery圓形菜單導航在切換關閉後創建小圓圈
- 17. 平局圓圈點
- 18. Phonegap構建角落中的小圓圈
- 19. 如何在html和css中創建多色圓圈
- 20. 如何在android中創建一個音量圓圈
- 21. 如何在Android中創建移動圓圈
- 22. 如何在CSS中創建一個反向透明圓圈
- 23. 沿D3圓圈包裝佈局中的圓圈的文本
- 24. 使用字符|,/,\, - 在shell腳本中創建旋轉圓圈
- 25. 如何在一個圓圈
- 26. 如何在圓圈內繪製圓形?
- 27. 創建與窗口大小成比例的圓圈
- 28. 用瓦片創建一個圓圈
- 29. 使用thread.sleep創建javafx中的圓圈()
- 30. 創建一個圓圈用梯度
你試過了什麼?告訴我們你的努力。 –
Alredy想出了主意並正確地工作:) –