Question

我想在circle :after伪元素中添加fontAwesome。当我尝试添加content:时，它出现在伪元素的左上角。当我尝试移动它时，所有圆圈和内容都会移动。

我希望fontAwesome中的?或任何其他图标位于中间。顺便问一下，如何在CSS中直接添加fontawesome？

＆＃13;

.le_quiz_entier {
  position: relative;
  width: 350px;
  background-color: white;
  height: 400px;
  margin-top: 45px;
  border-bottom: 1px solid lightgrey;
  box-shadow: 0px 2px #40c8d6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.le_quiz_entier .post-title {
  position: absolute;
  top: 60%;
  left: 2%;
  font-size: 22px;
  color: #404040;
}

.le_quiz_entier .postbody {
  margin-top: 40px;
  font-size: 22px;
}

.le_quiz_entier .postbody a:visited {
  margin-top: 40px;
  font-size: 22px;
  color:#404040;
}
.le_quiz_entier .cta {
  position: absolute;
  top: 90%;
  left: 15px;
  font-weight: bold;
  font-size: 14px;
  color:#38C8D6;
}
.le_quiz_entier .cta:visited {
  color:#38C8D6;
}

.le_quiz_entier:before, .le_quiz_entier:after {
  content: '';
  position: absolute;
  background: #fff;
  top: 0;
}

.le_quiz_entier:before {
    left: 0;
    right: 0;
    height: 5px;
    z-index: -1;
}

.le_quiz_entier:after {
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    width: 50px;
    background-color: rgba(#41c9d7, 0.56);

    height: 50px;
    border-radius: 50%;
}

.le_quiz_entier::after {
  content:"?";
  margin-top: 2px;
}

＆＃13;

<div class="le_quiz_entier"></div>

＆＃13;

Answer 1

就像任何元素一样，要使文本居中，使用text-align: center;，并将文本垂直放在中间，将line-height设置为容器的相同高度：

.le_quiz_entier::after {
  content:"?";
  margin-top: 2px;
  text-align: center;
  line-height: 50px;
}

以下是整个代码：

.le_quiz_entier {
  position: relative;
  width: 350px;
  background-color: white;
  height: 400px;
  margin-top: 45px;
  border-bottom: 1px solid lightgrey;
  box-shadow: 0px 2px #40c8d6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.le_quiz_entier .post-title {
  position: absolute;
  top: 60%;
  left: 2%;
  font-size: 22px;
  color: #404040;
}

.le_quiz_entier .postbody {
  margin-top: 40px;
  font-size: 22px;
}

.le_quiz_entier .postbody a:visited {
  margin-top: 40px;
  font-size: 22px;
  color:#404040;
}
.le_quiz_entier .cta {
  position: absolute;
  top: 90%;
  left: 15px;
  font-weight: bold;
  font-size: 14px;
  color:#38C8D6;
}
.le_quiz_entier .cta:visited {
  color:#38C8D6;
}

.le_quiz_entier:before, .le_quiz_entier:after {
  content: '';
  position: absolute;
  background: #fff;
  top: 0;
}

.le_quiz_entier:before {
    left: 0;
    right: 0;
    height: 5px;
    z-index: -1;
}

.le_quiz_entier:after {
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    width: 50px;
    background-color: rgba(#41c9d7, 0.56);

    height: 50px;
    border-radius: 50%;
}

.le_quiz_entier::after {
  content:"?";
  margin-top: 2px;
  text-align: center;
  line-height: 50px;
}

<div class="le_quiz_entier"></div>

Answer 2

更新css属性

.le_quiz_entier::after {
  content:"?";
  display:flex;
  justify-content:center;
  align-items:center;
}

.le_quiz_entier {
  position: relative;
  width: 350px;
  background-color: white;
  height: 400px;
  margin-top: 45px;
  border-bottom: 1px solid lightgrey;
  box-shadow: 0px 2px #40c8d6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.le_quiz_entier .post-title {
  position: absolute;
  top: 60%;
  left: 2%;
  font-size: 22px;
  color: #404040;
}

.le_quiz_entier .postbody {
  margin-top: 40px;
  font-size: 22px;
}

.le_quiz_entier .postbody a:visited {
  margin-top: 40px;
  font-size: 22px;
  color:#404040;
}
.le_quiz_entier .cta {
  position: absolute;
  top: 90%;
  left: 15px;
  font-weight: bold;
  font-size: 14px;
  color:#38C8D6;
}
.le_quiz_entier .cta:visited {
  color:#38C8D6;
}

.le_quiz_entier:before, .le_quiz_entier:after {
  content: '';
  position: absolute;
  background: #fff;
  top: 0;
}

.le_quiz_entier:before {
    left: 0;
    right: 0;
    height: 5px;
    z-index: -1;
}

.le_quiz_entier:after {
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    width: 50px;
    background-color: rgba(#41c9d7, 0.56);

    height: 50px;
    border-radius: 50%;
}

                 /* Update css properties*/

.le_quiz_entier::after {
  content:"?";
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="le_quiz_entier"></div>

Answer 3

.le_quiz_entier {
  position: relative;
  width: 350px;
  background-color: white;
  height: 400px;
  margin-top: 45px;
  border-bottom: 1px solid lightgrey;
  box-shadow: 0px 2px #40c8d6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.le_quiz_entier .post-title {
  position: absolute;
  top: 60%;
  left: 2%;
  font-size: 22px;
  color: #404040;
}

.le_quiz_entier .postbody {
  margin-top: 40px;
  font-size: 22px;
}

.le_quiz_entier .postbody a:visited {
  margin-top: 40px;
  font-size: 22px;
  color:#404040;
}
.le_quiz_entier .cta {
  position: absolute;
  top: 90%;
  left: 15px;
  font-weight: bold;
  font-size: 14px;
  color:#38C8D6;
}
.le_quiz_entier .cta:visited {
  color:#38C8D6;
}

.le_quiz_entier:before, .le_quiz_entier:after {
  content: '';
  position: absolute;
  background: #fff;
  top: 0;
}

.le_quiz_entier:before {
    left: 0;
    right: 0;
    height: 5px;
    z-index: -1;
}

.le_quiz_entier:after {
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    width: 50px;
    background-color: rgba(#41c9d7, 0.56);

    height: 50px;
    border-radius: 50%;
}

.le_quiz_entier::after {
    text-align: center;
    vertical-align: middle;
    line-height: 50px; /* the same as the :after height */
    content:"?";
    margin-top: 2px;
}

<div class="le_quiz_entier"></div>

位置元素在伪元素内

3 个答案: