Update:
Consider the following example markup:
<div class="container">
<span>x</span>
<span>x</span>
<span>x</span>
<input type="button" value="Cancel" />
<input type="button" value="Cancel" />
<span>x</span>
<span>x</span>
<span>x</span>
</div>
To achieve your desired outcome, you can utilize the below CSS:
CSS
.container > *:not([type="button"]):first-child::before,
.container > *:not([type="button"])::after
{
/*content: url('../Content/Images/Line.png');*/
content: ''; /* not needed if using a line image */
background: #555; /* not needed if using a line image */
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
margin: 0 8px;
}
See Example Here
Note: Instead of relying on the * selector, consider targeting specific child elements or assigning a class to them for better clarity.
Why did your initial CSS code not work as expected?
The :not() pseudo-class only accepts a simple selector.
As per the specification:
A simple selector can be a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
While the not pseudo-class can accept an attribute selector like: :not([type="button"]), combining it with an element selector (e.g., input) - such as :not(input[type="button"]) is incorrect, leading to undesired results.
This will work:
.Container > *:not([type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
However, this won't:
.Container > *:not(input[type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
Refer to this demonstration for clarification.