html - CSS - 框大小问题

Question

我没有找到我的问题的任何答案，即使它真的很简单。我正在使用 CSS proprety box-sizing 为 div(实际上是 <a>...</a>)做一个“内部边框”

.myDiv{ 
       box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       -webkit-box-sizing: border-box;
       border: 2px solid #3498db;
}

但它似乎根本不起作用，因为没有 border-box 属性，边框是一样的。有人有答案吗？

只是为了确定我在做什么。我想要的是得到一个 <a>一个“内部边界”。我显然知道 border: ...;属性，但它使元素变大，我不希望这样。我想要类似 border: -2px solid #3498db 的东西.

[编辑] 我找到了解决方案。评论说明。

Answer 1

在没有宽度的内联元素上使用 box-sizing: border-box 不会使边框在元素尺寸内。

相反，您可以使用 :after 伪元素使边框位于元素顶部。

HTML

This is some <span class="textBorder">text</span> and then some more.

CSS

.textBorder {
    background: #ffff99;
    position: relative;
}
.textBorder:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(0,0,0,0.5);
}

Demo