将锚文本放置在其绝对定位的伪元素上方

弗伦特·哈姆洛克(Flynt Hamlock)

是否有可能将其转为:

在此处输入图片说明

入这个?

在此处输入图片说明

IE。将锚文本置于其绝对定位的箭头伪元素上方。

我能想到的唯一解决方案是将锚文本包裹在一个范围内,然后再将其绝对定位在所有内容上。但是有没有一种方法可以在不修改标记的情况下做到这一点?

http://jsfiddle.net/pgvx1h04/

.tryout {
  margin-top: 50px;
}

.container {
  position: absolute;
  background: #fff;
  border: 1px solid black;
}

.container a {
  padding: 3px 11px;
  position: relative;
}

.container a:before, .container a:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  top: -8px;
  left: 18px;
}

.container a:before {
  background: black;
  z-index: -1;
}

.container a:after {
  background: white;
  z-index: 1;
  top: -7px;
}
<div class="tryout">
  <div class="container">
    <a>Hello world</a>
  </div>
</div>

博扬·佩特科夫斯基(Bojan Petkovski)

也许您可以像这样在前后伪造它:

.tryout {
    margin-top: 50px;
}
.container {
    position: absolute;
    background: #fff;
    border: 1px solid black;
}
.container a {
    padding: 3px 11px;
    position: relative;
}
.container a:before {
    content:"";
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #000;
    top: -19px;
    left: 18px;
    display: block;
}
.container a:after{
    content:"";
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #fff;
    top: -17px;
    left: 18px;
    display: block;
}
<div class="tryout">
  <div class="container">
    <a>Hello world</a>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

居中绝对定位伪元素

将元素置于绝对定位的叠加层上方

在其父元素内居中放置绝对定位元素

将字体真棒跨度图标放置在锚点内的文本上方

使用绝对定位的元素将div扩展为文本长度

使用绝对值将元素放置在其他元素内。元素是兄弟姐妹

将绝对定位的元素水平居中放置在另一个元素的中心之下

如何将':after'伪元素放置在其所有者的末端?

相对定位伪元素和绝对定位伪元素之间的差异

如何定义绝对定位元素的锚点?

定位锚元素中的文本,而不定位图像

CSS:放置绝对定位的元素,使其从外部接触其父元素

将文本放在绝对定位 div 的中心

在画布上放置文本:相对/绝对定位?Z索引?

如何将绝对定位的元素居中?

将绝对定位的元素宽度设置为其内容(仅是文本)

如何在不使用绝对定位的情况下使用内嵌伪元素将元素包装在内联元素周围

如何响应地在其父元素上方居中后伪元素?

绝对定位元素在其固定定位的父元素中被切断

如何将容器放置在<p>元素内并在其周围流动文本?

如何将链接定位到右上方区域?(以标头为相对的绝对定位)

滚动条在绝对定位的元素上方渲染,以在元素下方水平滚动容器

在图像上方居中放置2个文本元素

将MaterialUI工具提示放置在锚元素的“顶部”?(反应)

itext绝对定位文本

防止文本包裹在绝对定位的元素中

使SVG文本元素绝对定位(即不占用空间)?

绝对定位使元素消失

如何在绝对div下方放置文本元素?