Overlay div on before, css

Asked

Viewed 467 times

1

How to overlay the contents of the div on the before element of itself?
I’m teening to make sure that the straight line doesn’t show up when I’m in the words, so it looks like this:

--------- dsdsdsdsds --------

.abc {
    text-align: center;
    font-size: 13px;
    color: #C1BEBE;
    background-color: #F2F2F2;
    padding: 5px;
    margin: 23px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
    z-index: 999;
}
.abc::before {
    content: '';
    border-bottom: 1px solid #C2BFBF;
    width: 300px;
    float: left;
    margin-left: -43px;
    position: relative;
    top: 9px;
    z-index: -13333;
}
<div style="width:300px">
  <div class="abc">ab c mdo emosd sd</div>
</div>

  • 3

    Your question was restored because it had an answer. Remember that the content you post here belongs to the community, and that the answers can be useful to other people, they are not just for you. Therefore, to delete an answered question is to disrespect the respondent, trying to help both you and the community as a whole.

  • @bfavaretto Oh, I did not do it out of malice, in case you saw it worked in his answer and not in my original problem which leads me to believe that it is a bigger and isolated problem with my script, so I would delete and redo the question only that picking bigger problems as he himself asked in the comments of his answer, I thought it best to delete why the reason of the mistake was bigger and had nothing to do with this question.

  • By the way @Sergio is very good at what he does, always gives me direct answers and that solve the problem, I did not mean to disrespect anyone, but if you think it valid to leave a question without focus and nexus that will not help anything online problem is not mine.. I’m not going to be the one who gets confused in the future. I think that one should not look at the problem from above, one should analyze the question/answer and see if it is really useful to keep it in cases like this. It’s up to some people.

  • 1

    I agree that every question must be judged individually. But I understand that this, the way it’s written, is answered by what Sergio said. I can’t talk about your original problem, which seems to depend on the context that’s not part of what you posted. So I guess it’s worth keeping.

  • 1

    @bfavaretto All right.. It is at your discretion, as soon as I understand my problem I answer a new question.. thank you!

  • 1

    Right. I don’t know if I understand your final goal, but maybe this will help: http://answall.com/questions/58703/howto create a box-with-lines

Show 1 more comment

1 answer

0


If you remove the z-index of the element that will then have the ::before it will already work as you want.

.abc {
    text-align: center;
    font-size: 13px;
    color: #C1BEBE;
    background-color: #F2F2F2;
    padding: 5px;
    margin: 23px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    position: relative;
/*    z-index: 999; <---retirei */
}

jsFiddle: https://jsfiddle.net/d1n2ns7o/2/

  • in my final script does not work at all, does Voce have an alternative to what I want?

  • @user3163662 my jsFiddle works like you want it right? if it doesn’t work in your script I need to see your script. Adapt my jsFiddle until you play the problem.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.