Code REvision

Question

好的，我只想让我的链接有一个边框底部。

这是我的代码：

<div class="intro">jfskdlq kflsdq jklfjsqd <a href="google.be" title="website" target="_blank">website</a></div><p>jqskdlfjklqsjklmqjfkdlksqlmlmdfsqlmqsdf</p>

.intro {
    line-height: 27px;
    padding: 7px 16px 7px 16px;
    margin-bottom: 6px;
    letter-spacing: 2px;
    background: #cfffef;
    font-size: 11px;
    font-family: 'OpenSansRegular';
    text-transform: uppercase;
}

.intro a, .intro a:visited {
    color: #cccccc;
    border-bottom: 1px #ffffff;
}

但是，只有颜色：#cccccc显示，而不是边框底部。我做错了什么？

Answer 1

border-bottom: 1px #ffffff;

这不会显示任何内容，因为border-style的默认值为 none 。

因此，如果您确实想要查看任何结果，可能需要应用样式。

以下是一个例子：

border-bottom: 1px solid #ffffff;

我使用solid作为示例border-style，但它可以来自a range of styles。

详细了解border-bottom速记here。

这是jsFiddle.

Answer 2

您可能希望将边框样式（即实体等）添加到边框底部规则中。

Answer 3

text-decoration: underline怎么样？

使用border-bottom: 1px solid #fff; - ＆gt;注意你的声明的solid添加，一切都很好，但是当你想要制作文本时（像你那样的锚定链接）你想要使用下划线。

边框底部仅适用于文本的外框。因此，如果你有一段文字，那么最后一行文字将是“边框”而下划线 - 在所有文字上创建一个边框。

Code REvision

.intro a, .intro a:visited {
    color: #cccccc;
    text-decoration: underline;
}

链接样式不起作用

3 个答案:

Code REvision