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 - 定位一个伪元素

回答

相关问题