Question

i have the following

HTML:

<div id='button'>
    <a href=''>My Link</a>
</div>

CSS:

#button a {
    display: block;
    background-color:#FF0000;
    width:250px;
    text-align:center;
}

#button a::after {
    content: " \25b6";
    color:#000000;
}

jsfiddle

的内端

现在你可以从jsfiddle链接看到我在<a>文本末尾有一个黑色三角形，但我想要的是它在{{1}内部的末尾（在红色内）所以如果框重新调整大小，三角形将与末端一起移动，理想情况是它与multiple lines的中间垂直对齐

我尝试应用an ::after to the div并应用样式to the <div> instead of the <a>无效，所以我想知道我在这里缺少什么。

Answer 1

如果你想将箭头放在右边，你需要按照以下方式做点什么：

.container {
    position: relative;
}

.container::after {
    content: "\25B6";
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
}

这会将元素锁定到容器的右侧（right:0），并将其从容器顶部向下放置一半（top:50%）。然后我们将元素垂直向上移动，距离等于其自身高度的一半（transform:translateY(-50%)）。

最终结果可以在这里看到：http://jsfiddle.net/mdn7byfc/5/

我的位置my :: after content如何始终位于<a>?

1 个答案: