有没有办法让HTML下划线变粗?
我有一个居中的 div,里面有一个嵌套的 h1 。有什么方法可以用比 html 默认值更粗的线来加下划线吗?
I have a centered div with a nested h1 inside. Is there any way to underline it with a thicker line than the html default?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
这将使您能够控制
U
标记的下划线:在本例中,下划线将为四个像素。
This will give you control over the
U
tag's underline:In this case the underline will be four pixels.
不,没有。下划线的粗细取决于浏览器,并且在 CSS(或 HTML)中不会受到影响。
CSS3 文本草案中曾经建议使用
text-underline-width
属性。但人们对此兴趣不大,并于 2005 年从草案中删除。它可能从未实施过。通常的解决方法是使用底部边框而不是下划线。但请注意,这是另一回事。底部边框位于行框下方,而下划线通常位于文本的基线上,因此会剪切字母的下部分。一般来说,底部边框比下划线更易读,但它偏离了印刷传统。
以下示例演示了这些差异。
No, there isn’t. The thickness of the underline is browser-dependent and cannot be affected in CSS (or HTML).
There was once a
text-underline-width
property suggested in the CSS3 Text draft. But there was insufficient interest in it, and it was removed from the draft in 2005. It was probably never implemented.The usual workaround is to use a bottom border instead of an underline. However, note that it is a different thing. The bottom border is below the line box, whereas an underline is normally on the baseline of text and therefore cuts descenders of letters. Generally, a bottom border is better for legibility than an underline, but it deviates from typographic tradition.
The following example demonstrates the differences.
我不推荐使用内联 CSS,但为了简洁起见,我在这里使用了它:
I am not recommending inline CSS but have used it here for brevity:
是的,这是可能的。添加此属性以设置您想要的厚度
Yes it is possible. Add this property to set the THICKNESS you want
你也许可以用 border-bottom-width 达到同样的视觉效果;
You may be able to achieve the same visual effect with border-bottom-width;
由于您并不总是需要边框底部(例如,项目可能有填充,并且它会显得太远),因此此方法效果最好:
如果您想要更粗的下划线,请添加更多的
height
如果您希望文本和下划线之间有更多或更少的空间,请添加
margin-top
:Since you don't always want border-bottom (eg, item may have padding and it will appear too far away), this method works best:
If you want a thicker underline, add more
height
If you want more or less space between the text and the underline, add a
margin-top
: