I have this page: https://jsfiddle.net/pnLg2mrh/1/
I need to know:
How to automatically resize images so that they fit inside each yellow block
How to make the blue border div automatically resizing to contain the yellow blocks
How to center align the yellow blocks inside the blue border div
<div class="container">
<div class="block">
<a href="https://imgur.com/BTMfPIm.jpg">
<img src="https://imgur.com/BTMfPIm.jpg" class="img">
<div class="shade"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/eoSvnK8.jpg">
<img src="https://imgur.com/eoSvnK8.jpg" class="img">
<div class="shade"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/u1gFAvc.jpg">
<img src="https://imgur.com/u1gFAvc.jpg" class="img">
<div class="shade"></div>
</a>
</div>
.container {
border: 9px solid #55f;
width: 88%;
height: 40px;
margin: 0 auto;
}
.block {
position: relative;
width: 18%;
height: 300px;
border: 9px solid red;
float: left;
margin: 25px;
}
.img {
display: block;
}
.shade {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
background-color: rgba(225,255,0,0.7);
}
Why dont you make the images as background-image and give then background-size:cover : see snippet
.container {
border: 9px solid #55f;
width: 88%;
height: 40px;
margin: 0 auto;
}
.block {
position: relative;
width: 18%;
height: 300px;
border: 9px solid red;
float: left;
margin: 25px;
}
.img {
display: block;
width:100%;
}
.velo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
transition: .9s ease;
background-color: rgba(225,255,0,0.7);
}
.container .block {
background-size:cover;
}
.container .block:nth-child(1){
background-image:url('https://imgur.com/BTMfPIm.jpg');
}
.container .block:nth-child(2){
background-image:url('https://imgur.com/eoSvnK8.jpg"');
}
.container .block:nth-child(3){
background-image:url('https://imgur.com/u1gFAvc.jpg');
}
<div class="container">
<div class="block">
<a href="https://imgur.com/BTMfPIm.jpg">
<div class="velo"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/eoSvnK8.jpg">
<div class="velo"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/u1gFAvc.jpg">
<div class="velo"></div>
</a>
</div>
</div>
You can use flex-boxes for this. like so:
.container {
display: flex;
border: 9px solid #55f;
width: 88%;
margin: 0 auto;
}
.block {
position: relative;
flex-grow: 1;
border: 9px solid red;
float: left;
margin: 25px;
}
.img {
display: block;
width: 100%;
}
.velo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
transition: .9s ease;
background-color: rgba(225,255,0,0.7);
}
I solved the problem crossing mine and user181934's code. Further, i used justify-content and align-items to get the elements centered.
This is the result in jsfiddle: https://jsfiddle.net/pnLg2mrh/23/
Here the full code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content:center;
align-items:center;
background: -webkit-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
background: -o-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
background: -ms-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
background: -moz-linear-gradient(left, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
background: linear-gradient(to right, rgba(0,255,0,0)0%, rgba(29,224,59,10.8)100%);
width: 72%;
height: 100px;
margin: 0 auto;
margin-top: 160px;
}
.block {
align: center;
position: relative;
width: 19%;
border: 3px solid black;
-webkit-border-radius: 33px;
-moz-border-radius: 33px;
border-radius: 33px;
float: left;
margin: 6px;
}
.img {
width: 100%;
display: block;
border-radius: 31px;
}
.shade {
position: absolute;
border-radius: 30px;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 1;
transition: .9s ease;
background-color: rgba(225,0,0,0.8);
}
.block:hover .shade {
opacity: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="block">
<a href="https://imgur.com/M6gGG7x.jpg">
<img src="https://imgur.com/M6gGG7x.jpg" class="img">
<div class="shade"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/kfpD5cv.jpg">
<img src="https://imgur.com/kfpD5cv.jpg" class="img">
<div class="shade"></div>
</a>
</div>
<div class="block">
<a href="https://imgur.com/YlbMNNw.jpg">
<img src="https://imgur.com/YlbMNNw.jpg" class="img">
<div class="shade"></div>
</a>
</div>
</div>
</body>
</html>
Related
can anyone help me on how to remove the huge white space between the two images? Both images are in their respective divs with layer effects when hovered. I have tried changing display to inline-block and setting font-size to 0 but nothing works. I also want the two images to be at the center when adjusted. I may have incorrectly apply the mentioned efforts to different classes or divs throughout the process but I am not sure where I did wrong.
Attached are the html and css along with a screenshot of how it looks like on local server. I hope the attachments are useful. Thank you.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
Like this?
If so you just need to use display: flex and align-items: flex-start
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
align-items: flex-start
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
text-align: center;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://via.placeholder.com/150">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
Try to make row flex container, then align content to center, with gap you can make space between images:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
gap: 1em;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
<div class="row">
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="https://picsum.photos/200">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
you can use bootstrap class for width .campus-col or use custom width
You can use (justify-content: center) to center the children in the flex displayed parent, in short: center the .img in .row.
Then you can add margin for spaces between them (the method used in the code below).
Or you can use (justtify-content: space-between) and set the width of the parent (.row), then each .img will be at the edge or it's direction (left or right)
Check this for more detalis: A Complete Guide to Flexbox
The Code:
.row {
display: flex;
justify-content: center;
}
.img {
width: 200px;
height: 300px;
border: 1px solid;
border-radius: 6px;
}
.img {
margin: 0 20px;
}
<div class="row">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
Solution based on your code:
Edited:
.row {
display: flex;
justify-content: center;
}
.campus-col{
height: 200px; /* delete later, added to see the changes */
border: 1px solid #ddd; /* delete later, added to see the changes */
margin: 0 10px; /* add/remove spaces (left right of each one) */
}
The Code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.row {
display: flex;
justify-content: center;
}
.campus-col{
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
height: 200px;
border: 1px solid #ddd;
margin: 0 10px;
}
.campus-col img{
width: 100%;
display: block;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%;
font-weight: 500;
color: #fff;
font-size: 26px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
opacity: 0;
transition: 0.5s;
}
.layer:hover h3{
bottom: 49%;
opacity: 1;
}
<div class="row">
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>TEXT</h3>
</div>
</div>
<div class="campus-col">
<img src="#">
<div class="layer">
<h3>MESSENGER</h3>
</div>
</div>
</div>
Element 2 is an image for the youtube logo. Element 1 is a button with a visual hover effect with three bars stacked on top of each other.
I want the button on the left and the image right next to it.
I need them in the upper left corner.
Here is a screenshot so far https://postimg.cc/Mn2B8wCR
Here is the code I have so far
.element1 {
display: inline-block;
width: 500px;
}
.element2 {
display: inline-block;
width: 500px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger {
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger>div {
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first {
width: 55px;
top: 25px;
left: 20px;
}
.second {
width: 40px;
top: 45px;
left: 20px;
}
.third {
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
You can wrap it in a container and use display: flex;.
.nav-container{
display: flex;
width: 100%;
}
.element1{
display: inline-block;
width: 120px;
}
.wrapper{
padding-left: 10px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div{
width: 60px;
transition: width 0.3s ease;
}
.element2{
display: inline-block;
width: 500px;
}
<div class="nav-container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In HTML, wrap all of element 1 and 2 with a 'container' div:
<div class="container">
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
</div>
In CSS, make div container flex and into a row.
.container {
display: flex;
flex-direction: row;
}
Change your positions of your hamburger and wrapper class:
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger{
width: 100px;
height: 100px;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
Is this you want to do?
Edit:
Here I done below changes:
Removed all styles of the .wrapper which don't need there
Added vertical-align: middle for .element1 and .element2
Removed width from .element1 which don't need there
Added margin-left to .element2 for space
.element1{
display: inline-block;
vertical-align: middle
}
.element2{
margin-left: 30px;
display: inline-block;
vertical-align: middle
}
.hamburger{
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
background: #636363;
border-radius: 5px;
}
.hamburger > div{
position: absolute;
height: 10px;
background: rgb(255, 255, 255);
border: 5px;
}
.first{
width: 55px;
top: 25px;
left: 20px;
}
.second{
width: 40px;
top: 45px;
left: 20px;
}
.third{
width: 50px;
top: 65px;
left: 20px;
}
.hamburger:hover div {
width: 60px;
transition: width 0.3s ease;
}
.logo {
width: 300px
}
<div class="element1">
<div class="wrapper">
<div class="hamburger">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
</div>
<div class="element2">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>
you can use this
.container {
display:inline-block;
margin-right:auto }
/* the margin right auto is to force the elements to be on the left corner */ps it should be only the imge and the button inside this div(class='container')
<div align="center">
<div class="container2">
<img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px">
<div class="overlay">
<div class="text">Here you can discuss different topics and ask or answer questions.</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay2">
<div class="text">Bottom</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay3">
<div class="text">Bottom</div>
</div>
</div>
</div>
i want to make the images next to each other but i can't idk why or how tbh and this is the css i have tried everything it doesn't work
I want 3 images side by side with hover and caption, at the moment I have 3 images going from top to bottom, the hover is good but not side by side. How do I make the images appear side by side? Thanks.
.container2 {
position: relative;
width: 250px;
}
.image {
display: block;
width: 250px;
height: 300px;
height: auto;
margin: 17%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay {
height: 85%;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay2 {
height: 85%;
}
.overlay3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay3 {
height: 85%;
}
You would have to add float property to your container2 selector. Please check the css rule below.
.container2 {
float: left;
position: relative;
width: 250px;
}
.container {
width: 400px;
height: 400px;
padding: 0px;
display: grid;
grid-template-columns: auto auto auto;
}
.item {
width: 100px;
height: 200px;
margin: 2px;
}
<div class="container">
<div class="item" style="background-color:red">
</div>
<div class="item" style="background-color:blue">
</div>
<div class="item" style="background-color:yellow">
</div>
</div>
Why don't you grid-display property ?
This might help you
For these such scenarios there is a beautiful/clean/simple concept called flex which is helping by decreasing number of lines of code:
here is the example with column, color and hover effect, hope it helps you:
#MainDiv {
height: 200px;
width: 650px;
display: flex;
/* here is a concept */
flex-direction: row;
/* you can either change it to row/columns */
padding: 5px;
}
#firstDiv {
width: 200px;
margin: 5px;
background-color: red;
}
#secondDiv {
width: 200px;
margin: 5px;
background-color: blue;
}
#thirdDiv {
width: 200px;
margin: 5px;
background-color: green;
}
#firstDiv:hover {
background-color: blue;
color: white;
}
#secondDiv:hover {
background-color: green;
color: white;
}
#thirdDiv:hover {
background-color: red;
color: white;
}
<div id="MainDiv">
<div id="firstDiv">First Div</div>
<div id="secondDiv">Second Div</div>
<div id="thirdDiv">Third Div</div>
</div>
I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.
I'm trying to do that using the line height, but not able to.
Here's the code:
HTML/CSS:
.wrap {
text-align: center;
margin: 20px;
}
.links {
padding: 0 10px;
border-top: 1px solid #000;
height: 1px;
line-height: 0.1em;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
position: relative;
top: -10px;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Demo:
https://jsfiddle.net/nkq468xg/
You can use Flexbox on links and for line you can use :before pseudo-element on wrap element.
.wrap {
text-align: center;
margin: 20px;
position: relative;
}
.links {
padding: 0 10px;
display: flex;
justify-content: space-between;
position: relative;
}
.wrap:before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-top: 1px solid black;
background: black;
width: 100%;
transform: translateY(-50%);
}
.dot {
width: 20px;
height: 20px;
background: red;
}
<div class="wrap">
<div class="links">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
Here's one where the line is actually on top, but it does add another element to the HTML:
https://jsfiddle.net/nkq468xg/2/
.wrap {
text-align: center;
margin: 20px;
}
.links {
height: 20px;
position: relative;
}
hr {
border: 0;
height: 1px;
background: black;
position: absolute;
top: 1px;
width: 100%;
}
.dot {
width: 20px;
height: 20px;
background: red;
float: left;
margin-right: 150px;
}
<div class="wrap">
<div class="links">
<hr>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
You can use pseudo element, like ::after
.links {
padding: 0 10px;
overflow: auto; // Your div will have the height of the overflowing elements
}
.links::after {
content: '';
width: 100%;
height: 1px;
background: black;
display: block;
position: relative;
top: 10px;
}
Check your code snippet in your question here on SO ("Run code snippet" blue button), is that what you need?
Added position: relative; top: -10px; in your code for .dot.
.dot {
position: relative;
top: -10px;
}
Fiddle: https://jsfiddle.net/nkq468xg/3/
I want a stacked bar with inner vertical text. I failed to put it in the right position. This is how I want it:
This is my code and output:
.colWrapper{
height:200px;
width:100px;
position:relative;
border:1px solid #ccc;
}
.barContainer{
position:absolute;
bottom:0;
width:100%;
}
.bar{
widith:100%;
padding:10px;
transform: rotate(90deg);
text-align:center;
margin:0
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div style="clear:both;"></div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
You need to use -90deg and also, use the transform-origin:
.colWrapper {
height: 200px;
width: 100px;
position: relative;
border: 1px solid #ccc;
}
.barContainer {
bottom: 0;
width: 100%;
}
.bar {
padding: 10px;
transform: rotate(-90deg);
text-align: center;
margin: 0;
left: -25px;
transform-origin: right bottom;
position: absolute;
width: 100px;
bottom: 120px;
}
.bar:first-child {
left: -80px;
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
Second Method:
.colWrapper {
height: 200px;
width: 100px;
position: relative;
border: 1px solid #ccc;
}
.barContainer {
bottom: -5px;
width: 100%;
transform: rotate(-90deg);
position: absolute;
left: 5px;
}
.bar {
padding: 10px;
text-align: center;
margin: 0 0 15px;
sposition: absolute;
}
.bar:first-child {
left: -80px;
}
<div class="colWrapper">
<div class="barContainer">
<div class="bar" style="background-color:#b4cde2;">Software</div>
<div class="bar" style="background-color:#7ca7cc;">Banking</div>
</div>
</div>
You can also take a look at writing-mode and flex-box.
https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode
div {
display: inline-flex;
flex-flow: column wrap;
height: 320px;
width: 270px;
vertical-align: middle;
}
span {
padding: 20px 5px;
background: #1E84C6;
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-lr;
writing-mode: tb-lr;
text-align: right;
margin: 10px;
height: 100px;
width: 60px;
font-size: 30px;
line-height: 60px;
}
span:nth-child(3) {
height: 260px;
}
a {
display: inline-block;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
font-family: helvetica;
color: white;
}
div + div a {
transform: scale(-1, -1);
/* reverse writing direction optionnal*/
btext-align: left;
transform-origin: 1em 1.25em;
}
span:nth-child(2) {
background: #283F4F;
}
span:nth-child(4) {
background: #1DC685;
}
-
<div>
<span> <a href>one</a></span>
<span> <a href>two</a></span>
<span> <a href>three</a></span>
<span> <a href>four</a></span>
<span> <a href>five</a></span>
</div>
or
<div>
<span> <a href>one</a></span>
<span> <a href>two</a></span>
<span> <a href>three</a></span>
<span> <a href>four</a></span>
<span> <a href>five</a></span>
</div>
and so on ...