Wrapping CSS pseudo-element

Question

Is it possible to simulate a div around b and c items and to style it without changing this HTML?

I know there are ::before and ::after pseudo-elements but couldn't find any "wrapping" element. Maybe something like ::wrap(.b, .c).

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

A good example could be isolating and putting a single background image behind b and c.

Removed the "border" case. Intention is to group elements and not to put a border. Background image can be a good example if no specific solution is given for that. — Eduardo, May 11 '15 at 19:19
There are no wrapping pseudo-elements. And adding a wrapper element to `.b` and `.c` (manually or with JavaScript) is impossible, because only `li` is valid as a child of `ul`. — Rick Hitchcock, May 11 '15 at 20:27
Does this answer your question? [CSS container pseudo element?](https://stackoverflow.com/questions/11586192/css-container-pseudo-element) — Kal, Jul 13 '21 at 01:49

Darren · Answer 1 · 2015-05-11T19:09:00.297

You can use the border property and apply it to the b and c class:

li.b {
    border:1pt solid black;
}

li.c {
    border:1pt solid black; 
}

http://jsfiddle.net/ykjv16d8/1/

From your comments:

You can set the border-bottom to none for b and the border-top to none for c

li.b {
    border:1pt solid black;
    border-bottom: none;
}

li.c {
    border:1pt solid black; 
    border-top:none;
}

http://jsfiddle.net/ykjv16d8/2/

score 2 · Answer 2 · answered May 11 '15 at 18:52

2

Wouldn't you just do something like,

li.c,li.b { border: 1px solid black; }

answered May 11 '15 at 18:52

Quintile

335
2
6

Sorry I was not clear and just made an edit. I mean one border around both but my intention is not the border itself. I want to simulate a div around them. – Eduardo May 11 '15 at 18:58

Rick Hitchcock · Answer 3 · 2015-05-11T19:14:10.410

Assuming no margin between list items, this will work:

li.b, li.c {
  border: 1px solid black;
}

li.b {
  border-bottom: none;
}

li.c {
  border-top: none;
}

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

If there are margins, you'll need to be a bit more creative:

li {
  margin: 20px;
  position: relative;
}

li.b::before, li.c::before {
  content: '';
  border: 1px solid black;
  position: absolute;
  width: 100%;
  height: calc(100% + 20px);
  top: -10px;
  left: -2px;
}

li.b::before {
  border-bottom: none;
}

li.c::before {
  border-top: none;
}

<ul>
    <li class="a">a</li>
    <li class="b">b</li>
    <li class="c">c</li>
    <li class="d">d</li>
</ul>

score 1 · Answer 4 · edited Sep 19 '18 at 23:06

1

There is not (currently) a solution for this using good old CSS psuedo elements.

edited Sep 19 '18 at 23:06

Mr. Hugo

11,887
3
42
60

answered Sep 19 '18 at 17:16

Jicub

21
4

score 0 · Answer 5 · answered May 11 '15 at 19:13

0

If i understand you want both b and c to be in one box??

try this

html

<ul>
  <li class="a">a</li>
  <li class="b bc">b</li>
  <li class="c bc">c</li>
  <li class="d">d</li>
</ul>

css

.bc {
   border: 1px solid red;
 }

.b.bc {
  border-bottom: none;
}

.c.bc {
 border-top: none;
}

is that what you mean? let me know

answered May 11 '15 at 19:13

Abuasmaa

11
2

I confused everybody asking to put a border. I need to simulate a div around them without changing html. Try to put a background image using the same solution. – Eduardo May 11 '15 at 19:24

Wrapping CSS pseudo-element

5 Answers5