css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Comments

  1. Kinda sorta solved it with sibling combinators..

    Positioning the <del> is troublesome though.

  2. @cobra_winfrey Thanks for the fork, and taking up my challenge within a challenge :)

    Interesting and clever approach 👏. I'm sure I don't need to tell you there are some drawbacks though (e.g. 97*2 unused selectors).

    I think correct positioning might just be impossible without wrapping divs or JS. So the best approach might be more like this: https://codepen.io/liamj/pen/xjYMZj/

    This is also a little more accessible I guess as it doesn't rely on hover.

  3. @liamj yeah I went a little nuts on those selectors just to cover perhaps an entire paragraph or two :)

    I really don't think there's an efficient way to handle this without wrapping or js either because sibling combinators can't really adequetely fetch positioning.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...