I recently came across a question about creating responsive separators for horizontal lists on Stack Overflow
While attempting to implement this, I encountered some challenges.
document.onkeydown = function(event) {
var actionBox = document.getElementById('content');
switch (event.keyCode) {
case 65:
event.cancelBubble = true;
event.returnValue = false;
actionBox.innerHTML = '<ul id="content" class="name-container"> <li>Prename <strong>Name</strong></li> <li>Prename <strong>Name</strong></li> <li>Prename <strong>Name</strong></li> <li>Prename<strong>Name</strong></li></ul>';
break;
}
return event.returnValue;
}ul {
text-align: center;
padding: 0;
}
li {
display: inline;
}
li::after {
content: " ";
word-spacing: 1em;
background-image: linear-gradient(
-0.25turn,
transparent 0 calc(50% - 0.03em),
currentcolor 0 calc(50% + 0.03em),
transparent 0
);
}
body {
overflow: hidden;
margin: 0;
font-family: 'Gill Sans Nova', sans-serif;
background: no-repeat url('Hintergrund-01.jpg');
background-size: cover;
}
#content {
color: #FFF;
display: flex;
flex-wrap: wrap;
flex: 1;
}
#name {
font-size: 3em;
color: #FFF;
font-family: "gill-sans-nova", sans-serif;
font-weight: 700;
font-style: normal;
padding-left: 10px;
}
#namestiftung {
font-size: 3em;
color: #FFF;
font-family: "gill-sans-nova", sans-serif;
font-weight: 700;
font-style: normal;
padding-left: 10px;
}
#vorname {
font-size: 3em;
color: #FFF;
font-family: gill-sans-nova, sans-serif;
font-weight: 300;
font-style: normal;
}
#vornamestiftung {
font-size: 3em;
color: #FFF;
font-family: gill-sans-nova, sans-serif;
font-weight: 300;
font-style: normal;
}
#titel {
font-size: 1.5em;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: normal;
display: block;
width: 100%;
}
small {
width: 100%;
font-size: 1.5em;
font-family: gill-sans-nova, sans-serif;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
}
.smalltext {
width: 100%;
}
#logo {
margin-left: 4em;
text-align: right;
}
#logo img {
height: 10em;
text-align: right;
margin-top: -20px;
}
.container {
display: flex;
flex-direction: row-reverse;
padding: 40px;
justify-content: space-around;
}
.name-container {
display: flex;
flex-wrap: wrap;
column-gap: 12px;
font-size: 40px;
line-height: 1.3;
align-content: space-between;
}
.name-container.four {
font-size: 38px;
}
div.name-container div:not(:last-child) {
border-right: 2px solid #fff;
padding-right: 12px;
}
.name-container div:nth-child(n+3):nth-last-child(3n+1) {
border-right: none;
}<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="logo">
<img src="NOTG_2023_Logo.png" />
</div>
<div id="content">
<!-- ############### -->
<!-- Content of Page -->
<!-- ############### -->
</div>
</div>
<script src="names.js"></script>
<script src="separator.js"></script>
</body>
</html>The content is dynamically inserted using JavaScript:
I made use of the CSS provided in the earlier mentioned question.
However, despite having the ::after element, there seems to be no separator between the names.
https://i.stack.imgur.com/OUzPb.png
Interestingly, the same CSS works fine when applied to a predefined list.
The desired outcome should resemble the following:
ul {
text-align: center;
padding: 0;
}
li {
display: inline;
}
li::after {
content: " ";
word-spacing: 1em;
background-image: linear-gradient(
-0.2turn,
transparent 0 calc(50% - 0.03em),
currentcolor 0 calc(50% + 0.03em),
transparent 0
);
}<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
<li>gazonk</li>
<li>qux</li>
<li>quux</li>
</ul>It appears that the issue arises because the wrapping div#content is styled as a flexbox. Any insights on why this occurs? I would prefer to maintain the flexbox layout :)