0

So what I want is to have a horizontal line on the right side of my p element, so I applied a border-bottom: 1px solid black to p::after, like this

(The elements' outline in red, blue, and green are for debugging and are not part of the final design)

div {
    position: relative;
    height: 100%;
    width: 100%;

    outline: 1px solid red;
}

p {
    transform: rotate(-90deg);

    display: flex;
    flex-direction: row;

    outline: 1px solid blue;
}
    p::after {
        content: "";
        flex: 1 1;
        border-bottom: 1px solid black;
        margin: auto;
        margin-left: 10px;

        outline: 1px solid green;
    }
<div>
    <p>Text here!</p>
</div>

The code above works fine and it achieves what I want.

...however, if I want to move the p tag using position: absolute, the line disappears (see the snippet below). How can I work around this?

div {
    position: relative;
    height: 100%;
    width: 100%;

    outline: 1px solid red;
}

p {
   transform: rotate(-90deg);
   display: flex;

   position: absolute;
   top: 50%;
   left: 50%;

   outline: 1px solid blue;
}
    p::after {
        content: "";
        flex: 1 1;
        border-bottom: 1px solid black;
        margin: auto;
        margin-left: 10px;

        outline: 1px solid green;
    }
<div>
    <p>Text here!</p>
</div>
Dai
  • 141,631
  • 28
  • 261
  • 374
Owenn
  • 638
  • 1
  • 6
  • 23
  • 2
    BTW, pseudo-elements use `::`, e.g. `div::before` and `a::after`, not `:`. A single-colon is for pseudo-classes, not pseudo-elements (though browsers do support `:after` and `:before` for now, it's deprecated syntax). – Dai Jun 07 '22 at 12:35
  • You say you want a "horizontal" line on the "right-side" of the `p`, but is that the right-side **before** or _after_ applying the `rotate(90deg)` transformation? – Dai Jun 07 '22 at 12:40
  • @Dai Oh alright thank you will edit my code accordingly using `::`. I'm rotating -90 degree so it should still be **after**. – Owenn Jun 07 '22 at 12:41
  • Remember that `transform: rotate` applies to all descendant boxes too, including `::after`, so `border-bottom: 1px solid black` will result in a **vertical line**. not a horizontal one. Anyway, I don't think you need to use `transform: rotate()` at all: there are better ways of rotating text. – Dai Jun 07 '22 at 12:42
  • You also _should not_ be using `-webkit-transform` anymore, just use `transform` without the prefix. It's been standard and widely supported _without the prefix_ since 2014. – Dai Jun 07 '22 at 12:43
  • I've edited your post to add an `outline` to the boxes - which I hope should also help reveal what's going on. – Dai Jun 07 '22 at 12:45
  • I'm still confused by what you expect a "horizontal" line "on the right side" of the `

    ` should look like - please post a sample image or mock-up that shows us what you want to see.

     – Dai Jun 07 '22 at 12:47
  • @Dai what I'm expecting is exactly like what the snippet above shows. It's originally a horizontal line and when I rotate it, it becomes a vertical right. – Owenn Jun 07 '22 at 13:10
  • @Dai The syntax is not deprecated, it's just old-standard syntax (CSS 2.1). – connexo Jun 07 '22 at 20:57

1 Answers1

0

The problem in your code is that:

  1. You did not define the height of the outer <div>: while you put height: 100% that won't work: it is not correct to use height: 100% to fill the viewport, instead use 100vh.
  2. The other problem is with position: absolute: I fix it defining in the rest of the sides the 0 and the left the 45% and adjust it to suit you if you wanted to center the paragraph and line in the parent container you could have done it without the absolute position

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    div {
        position: relative;
        height: 100vh;
        width: 100%;
        padding-bottom: 20px;
        background-color: #2f4;
    }

    p {
        transform: rotate(-90deg);
        display: flex;
        justify-content: center;
        width: 200px;
        align-items: center;
        position: absolute;
        top: 0%;
        left: 45%;
        bottom: 0%;
        right: 0%;
    }
        p:after {
            content: "";
            flex: 1 1;
            border-bottom: 1px solid black;
            margin: auto;
            margin-left: 10px;
        }
<div>
    <p>Text here!</p>
</div>
Dai
  • 141,631
  • 28
  • 261
  • 374
John Gualteros
  • 3
  • 1