僞元素內部的位置元素

我想在圓圈的:after僞元素內添加一個fontAwesome。當我嘗試添加content:時，它出現在僞元素的左上角。當我嘗試移動它時，所有圈子和內容都會移動。僞元素內部的位置元素

我想?或fontAwesome的任何其他圖標在中間。順便說一下，我如何直接在CSS中添加一個fontawesome？

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

來源

2017-05-11 Francis

這是因爲僞元素正在相對於其父元素進行定位！你爲什麼不簡單地添加另一個元素？如果你不想添加另一個元素使用餘量！ – Gacci

請檢查我的答案。 – LKG

就像任何元素，居中的文本，使用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>

來源

2017-05-11 03:44:39

更新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>

來源

2017-05-11 03:50:32 LKG

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

來源

2017-05-11 04:01:04 Demonyowh

總是添加一個解釋給你的答案，所以OP和其他人瞭解你的答案爲什麼/如何工作。同時避免添加與已有答案完全相同的答案。你的答案與我的答案完全相同，那麼在這裏重複我的答案有什麼好處？也許你沒有複製我的答案，但你需要在回答問題之前先看看現有的答案，所以你不要重複。 –

僞元素內部的位置元素

回答

相關問題