Question

我有一个已经使用了:: after元素的按钮（下面），但是我想在div的右侧添加一个shape /元素。

＆＃13;

a {
  position: relative;
  display: inline-block;
  padding: 15px 10px;
  margin: 0 5px;
  color: #222;
  font-size: 0.9em;
  font-weight: 700;
}

a:after {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: #d11e5d;
  margin: 0 auto;
  height: 3px;
  width: 0;
  bottom: 6px;
  left: 0;
  right: 0;
}

a.btn-contact::before {
  background: #0c0;
  content: '';
  display: inline-block;
  float: left;
  height: 10px;
  width: 10px;
  position: absolute;
  right: 0;
  top: 0;
}

＆＃13;

<a href="" class="btn-contact">button</a>

＆＃13;

我把它放在链接的右边，但是我希望它在右侧垂直对齐

编辑：提供完整的css / html。带有.btn-contact类的Wordpress网站只应用于一个按钮（我希望旁边的形状）

Answer 1

我改变了你提供的html（猜测它是你想要的）

不要将x[i]用于y[*]元素。它没有任何效果。

使用float，这意味着absolute高度的一半（位置相对的项目）和top:50%向上移动li a宽度的一半高度。

这两个样式在transform:translateY(-50%)伪元素

的中间垂直对齐

检查下面的代码段并告诉我这是否是您要找的

:before

before

::元素与右边对齐之前

1 个答案: