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

可以請你提供完整的代碼或演示鏈接 –

歡迎來到Stack Overflow。我們是一個傳統的社區驅動的問答平臺，致力於爲[質量問題]提供[高質量的答案]（https://stackoverflow.com/help/how-to-answer）（https://stackoverflow.com/help/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位置。如果你在x/y中寫了一個特定的px位置，那麼在這種情況下你的元素將會正常工作，但是如果你調整了屏幕的大小，可能就不會。 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 - 定位一個僞元素

回答

相關問題