Search code examples
htmlcssclassstylesstylesheet

how to use pseudoclass :before/:after?

hello I'm having problems through using css pseudo classes :before and :adter to echo out different error messages that comes from php on a div layer.

beside the input field i would like to display a div layer. therefor i use z-index method because that div is front of body.

now my problem is that the div layer should appear with different lengths regarding from the string length. in another question someone gave me the hint instead of using an extra div for an arrow and then using the div layer to combine both into one. therefor i found hints at the web to use pseudo classes and creating a speechbubble. as i looked for it i found nearly everywhere the same.

the div layer would be the relative object and the arrow is the child object. In my case it needs to be other way round. the arrow has to be the relative object because of its fixed position next to the input fields. the div layer is variable in its length but should be appended left hand side to the arrow.

so the problem i have is that the div layer will not be displayed when setting the css like:

.wrapper #header #navline form .erm { //the div layer for the arrow that will be placed next to the input field
    position:absolute;
    z-index:2;
    width: 0px;
    margin-left: -25px;
    margin-top: -10px;
    height: 0px;
    border-top: 20px inset transparent;
    border-left: 22px dashed #f23;
    border-bottom: 20px inset transparent;
}
.wrapper #header #navline form .erm:before { // to border arrow
    content:"";
    position:absolute;
    z-index:2;
    margin-left: -22px;
    margin-top: -17px;
    width: 0px;
    height: 0px;
    border-top: 17px inset transparent;
    border-left: 19px dashed #f2f2f2;
    border-bottom: 17px inset transparent;
}
.wrapper #header #navline form .erm.left { //the wrapper with the text that should be append left to the arrow
    content:"";
    color: #F23;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:12px; 
    white-space: nowrap; 
    line-height: 26px;
    font-family:Arial, Helvetica, sans-serif;
}

and here is the html:

<?php if (empty($errors['a']) === false){?>
    <input class="error" type="text" id="a" name="a" value="<?php echo isset($a) ? $a : '';?>" />
<div class='erm'>
    <?php echo $errors['a'][0];?>
</div>
<?php }?>

i made some screenshots to show what i would like to archieve.

here is what it should look like:

ex

okay, this what i looks like before. as on the picture there is the red arrow, the gray layer above and the div layer for the text, what not will be visible at all.

so when setting up the div layer as a relative object it will happens this when the strlen is longer than in that version i positioned it before:

ex2

or when strlen is shorter:

ex3

so if there is someone who could help me out i really would appreciate.

thanks alot.

Solution

  • I think that you have almost all that you need ok. I would say that the only detail that you are missing is how to position your bubble. Try setting only the right property

    .wrapper #header #navline form .erm.left { 

  right: 15px;

    This should anchor the right border where you want it, and if the width changes it will be the left side that moves.

    Note: I haven't checked the pixel value above, it's just an example

    editing

    I have done my best with your fiddle:

    update

    I have added inputs to make it more similar to what I think that you want. Then I have positioned your divs, (where the text is) absolutely to match the input position, but using the right property. This way you don't need to worry about the text length. You only need to take into account to leave some space for the arrow.

    Last, I put the arrow where it should be.

    You can not position an pseudo element (like ::after) relative to the "father" element