CSS - 擬似要素の位置付け

-2

擬似要素の後に配置するのに問題があります。私はそれを配置しようとすると、それは応答しません。これは私が持っているものです。CSS - 擬似要素の位置付け

.intro>h1::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: -140px; 
    width: 100px; 
    left: calc(50% - 50px); 
    border-bottom: 7px solid rgba(49, 42, 96, 1); 
}

それは時にデスクトップ上の通常位置が、モバイルにも配置していません。

どうすればこの問題を解決できますか。おかげさまで

出典

2017-07-19 o.danielcoker

jsfiddle！デモを作成 – Pedram

あなたは完全なコードまたはデモリンクを是非提出してください –

ようこそスタックオーバーフローへ。私たちは伝統的なコミュニティ主導のQ＆Aプラットフォームであり、[質疑応答]（https://stackoverflow.com/help）に[質疑応答]（https://stackoverflow.com/help/how-to-answer）を提供することを約束しています。/how-to-ask）[Stack Snippet]の形式で[mcve]を含みます（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code -snippets /）。 – domsson

この

.intro>h1::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: -10px; 
    width: 100px; 
    left: 0; 
    right: 0; 
    margin-right: auto; 
    margin-left: auto; 
    border-bottom: 7px solid rgba(49, 42, 96, 1); 
} 
h1{ 
    position: relative; 
    display: inline-block; 
}

出典

2017-07-19 12:06:15

ありがとうございました。 –

推測の良い仕事。 OP、上記のコメントの中の提供されたリンクを読んで、あなたの次の質問に[mcve]を提供してください。乾杯。 – domsson

それは推測@domdomで完了しました。だから、次回にスニペットを提供してください。@ o.danielcoker –

-4

問題はあなたのx/yの位置です。特定のpx位置をx/yに書き込むと、要素はこのシナリオで正しく機能しますが、画面のサイズを変更した場合は正しく表示されません。 Remenber 50％は、タブレットやデスクトップなどでは同じではありません。スニペットを追加します。

出典

2017-07-19 12:04:08

これは私の作品のように試してみてください。

.intro>h1::after { 
    content: ""; 
    display: block; 
    position: relative; 
    bottom: -20px; 
    width: 100px; 
    margin: 0px auto; 
    border-bottom: 7px solid rgba(49, 42, 96, 1); 
}

出典

2017-07-19 12:12:43 Nicholas

CSS - 擬似要素の位置付け

答えて

関連する問題