Question

我很好奇。这更多是为了娱乐和提示，但你知道我是否可以处理一个属性来将文本放在中间位置。

我在JS bin上发布了代码（如果CSS没有打开则刷新）：http://jsbin.com/3/uhumok/edit?html,css,live

HTML：

<a class="one" href="#">Hi !</a>

CSS：

a {
    display:block;
    color:white;
    text-decoration:none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
    width:100px;
    height:100px;
    text-align:center;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;

    border-width:50px;
    border-color:rgba(0,0,0,1);

    -webkit-transition:0.2s ease;
    -moz-transition:0.2s ease;
    -ms-transition:0.2s ease;
    -o-transition:0.2s ease;
    transition:0.2s ease;
}

a:hover {
    border-width:0;
    border-color:rgba(0,0,0,0.5);

    -webkit-transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -ms-transition-duration:0.5s;
    -o-transition-duration:0.5s;
    transition-duration:0.5s;
}

a.one {border-style:solid;}

我认为如果没有:after或:before，这是不可能的。

Answer 1

你不能在<a>内添加另一个标签吗？如果是这样，您可以绝对定位此内部标记以实现：http://jsbin.com/3/uhumok/6/edit?html,css,live。

Answer 2

如果你制作颜色：＃000并添加padding-top：50px to：hover，文本几乎会保持在同一个地方。我没有保存示例，因为我没有看到保存选项。如果您使用：before /：之后文本绝对定位，那么idk为什么你不想使用它们;

在css3边框上的文字

2 个答案: