Question 184053 in Html Question posted in
Some basic documentation can be found here.

Is there a way to ask a browser to render an HTML element after its parent?

Is there a way, using CSS only, to ask a browser to render this

<p>One <span class="foo">Two</span> Three</p>

as if I had written

<p>One Three</p>
<span class="foo">Two</span>

The reason I want to do this is that I want to dynamically reorder certain spans to render after their parent on mobile devices and inside their parent on wide screens.

Tags:

2

Answers


  1. 0

    A very hacky way to use with caution that works only for your specific case

    p {
  display: grid;
  grid-auto-flow: dense;
  justify-content: start;
  gap: 5px;
}

.foo {
  grid-row: 2;
  grid-column: span 2;
}
    <p>One <span class="foo">Two</span> Three</p>
    Login or Signup to reply.
  2. 0

    This is a tad brittle, but could be modified to be less so, like adding a bottom padding area for the p element to make sure there’s space for the span:

    p {position: relative;}
span {position: absolute; top: 100%; left: 0;}
    <p>One <span class="foo">Two</span> Three</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search