位置元素在伪元素内

Question

I would like to add a fontAwesome inside the circle's :after pseudo element. When I try to add a content: , it appears on the top left of the pseudo element. When I try to move it, all the circle and the content move.

I would like the ? or any other icon from fontAwesome to be in the middle. By the way, how can I add a fontawesome directly in CSS?

 .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; } 

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

Answer 1

Just like any element, to center the text, use text-align: center; , and to put the text in the middle vertically, set line-height to the same height of the container:

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

Here is the entire code:

 .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

Update css properties

.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>