We Keep Coding

How can I add text at a position that is relative to a pseudo-element?

I am trying to add text that is aligned with a pseudo-element on a div. For reference, I am talking about the .div2::before in my code as that is the dashed line between the inner and outer circle. I want to add a label that says "Wall Thickness" as shown below. The text should adjust with the circle size as the inner/outer circle size will be increasing/decreasing but the text position should adapt. What is the best way to accomplish this?
jsFiddle: https://jsfiddle.net/Kaevonz/cjpkxg6L/6/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>

We need two elements within each other. Since we can't do that with pseudo elements, we need to add one element to the markup.
The newly added element will serve as a reference for where the text should be placed, so we align it exactly the same way as we would the first pseudo element.
And finally we use a child element or preferably a pseudo element for the text.
Note: for pseudo elements, text can be added via attributes.
DEMO
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 500px;
border: 1px solid gray;
}
.elem {
box-sizing: border-box;
}
.div1 {
border-top: 3px solid #0DA8AA;
border-left: 1px solid #0DA8AA;
border-right: 1px solid #0DA8AA;
height: 60px;
width: 150px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 340px;
height: 340px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div2::before {
content: '';
position: absolute;
left: 0;
top: 50% - 0.5px;
width: 50%;
height: 1px;
border-top: 0.5px dashed black;
transform: translateY(-50%) rotate(45deg);
transform-origin: right center;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 120px;
height: 120px;
background: white;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1;
}
.div4 {
border-top: 0.5px dashed black;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.div5 {
border: 0.5px dashed black;
width: 150px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
float: left;
}
/* NEW */
.text {
height: 1px;
position: absolute;
left: 0;
top: 50%;
width: 50%;
transform: translateY(-50%) rotate(45deg) translateX(-20%);
transform-origin: right center;
}
.text:before {
content: 'WE HAVE TEXT, lots of it';
transform: translateY(-50%) rotate(-135deg);
position: absolute;
right: 100%;
writing-mode: vertical-rl;
height: 100px;
/* height as width */
}
/* Preview */
.div2 {
animation: x 1s linear alternate infinite;
}
#keyframes x {
from {
height: 300px;
width: 300px;
}
to {
height: 450px;
width: 450px;
}
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="text"></div> <!-- NEW -->
<div class="elem div3">
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>
I had to do some text alignment magic, which may or may not be optimal, but at this point I believe the idea is passed across.

How to make selected div on hover to change css property

I need little help, I'm new to JavaScript. I'm not sure how to fix the bug, currently, the code on hover is making the first box to display the title. But I want the title to be shown only on the chosen box. I thought in the for loop, the boxes[i] will make his first className[0] to display flex, but I guess it doesn't work that way. How can I fix this?
var boxes = document.getElementsByClassName("portfolio-content-box");
for(var i = 0; i < boxes.length; i ++){
boxes[i].addEventListener("mouseover", function(){
document.getElementsByClassName("portfolio-content-title-box")[0].style.display = "flex";
})
}
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left:2px solid red;
cursor:pointer;
transition:0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top:0;
left:0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0,0,0,1);
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>

Not sure why you want to use JS, but it can be done with pure CSS. You just need to target the title box when someone hovers the content box as below
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
Working Code
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left: 2px solid red;
cursor: pointer;
transition: 0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>

Connecting two divs with a circle at the line's end

I am creating some cards that are to display a kind of timeline, and I want to do that by having some card divs with content that are connected with a line and with a circle at each of the ends of the line to make it look good. Currently I just have the cards, and I cannot figure out how to make the connected lines. I currently have something like this:
HTML:
<div class="card-wrapper">
<div class="card">
</div>
<div class="card">
</div>
</div>
CSS:
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
}
JSFiddle: https://jsfiddle.net/L3h9xe5d/10/
And I want something like this:

Please follow the above steps..
HTML
<div class="card-wrapper">
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
</div>
css
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
position: relative;
}
.card::after {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
}
.card::before {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
z-index: 9;
}
.card:first-child::before,
.card:last-child::after,
.card:first-child .card-inner::before,
.card:last-child .card-inner::after {
display: none;
}
.card-inner {
width: 100%;
height: 100%;
}
.card-inner::after {
position: absolute;
right: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}
.card-inner::before {
position: absolute;
left: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}

Center and layer multiple DIVs with flexbox

I would like to layer multiple DIVs on top of one another while using flexbox to vertically and horizontally center them both.
In the example below, I would like both .whitebox and .bluebox to be vertically and horizontally centered inside of the container, overlapping one another. Currently .whitebox is positioned with absolute position. Is this possible?
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>

No need to position the top and left. Just applying absolute positioning is enough because that "pops" the elements into their own layers, so they can be placed at will without affecting other elements in that layer. Once you do that, the align-items and justify-content will do their jobs.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>

You can just remove the offsets like below, it will get the small box centered with the existing rules you set on everything else.
.whitebox {
...
/* top: 0; */
/* left: 0; */
}
Edit: The above works in Chrome, but doesn't seem to be working in Firefox.
In fact, I would simplify the entire code as follows. It should work everywhere where flexbox is supported.
.bluebox {
display: flex;
align-items: center;
justify-content: center;
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
}
<div class="bluebox">
<div class="whitebox"></div>
</div>

I would rather use the usual method for centering: The container gets position: relative and defined width and height, the elements to-be-centered inside the container get this CSS:
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Plus z-index values for the order in which they are above each other, and possibly opacity so they all can be seen simultaneously...
So in your example, that would be
.container {
height: 16px;
width: 16px;
background-color: white;
border-radius: 4px;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
</div>
The flexbox properties are superfluous when you do it this way.

Set your divs up like this:
<div class="parent">
<div class="wrapper">
<div class="whitebox"></div>
<div class="bluebox"></div>
</div>
</div>
Then apply this css:
.parent{
display: flex;
align-items: center;
justify-content: center;
}
.wrapper{
position:relative
}
.whitebox, .bluebox{
position:absolute;
top:0;
left:0;
}

You can use margin-left and margin-top because you know the height and width of your element.
Explanation:
Move your element from top 50% and from left 50%.
Move your element 4px from right and 4px from bottom.
.container {
height: 16px;
width: 16px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bluebox {
height: 16px;
width: 16px;
background-color: #0073FF;
border-radius: 4px;
position: absolute;
top: 0;
left: 0;
}
.whitebox {
height: 8px;
width: 8px;
background-color: white;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -4px;
margin-top: -4px
}
.border {
height: 16px;
width: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="bluebox"></div>
<div class="whitebox"></div>
<div class="border"></div>
</div>

Moving Circle to Top of Border With CSS

Decomposing my larger problem into this simple statement, I have a blue circle inside a box with a red border.
How do I keep the circle in the center but make it overlap over the top, horizontal line of the box's border?
My attempt looks like to reach the final result: https://jsfiddle.net/pgcft3z7/1/
HTML:
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>
CSS:
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:absolute;
top: -5px;
left: 200px;
}
.container {
margin-top: 40px;
border: solid 1px;
border-color: red;
}
This involves me needing to manually specify a left and top which seems like it won't remain centered or will be very responsive.
Example of what it currently looks like:
https://jsfiddle.net/pgcft3z7/

Here is JSFiddle.
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position: relative;
}
.border {
border: solid 1px;
border-color: red;
width: 100%;
height: 70px;
top: 30px;
position: absolute;
}
.container {
margin-top: 40px;
position: relative;
}
<div class="container">
<div class="border">
</div>
<div class="circle">
Circle Text Here
</div>
</div>

.line{
position:relative; /* in order to contain inner absolute circle pos */
margin-top:50px;
background:red;
height:0;
border:1px solid red;
}
.circle{
position: absolute;
width:40px; height:40px;
top:50%; left:50%; /* 50% of parent */
transform: translate(-50%, -50%); /* -50% of self */
background:blue;
border-radius:50%;
}
<div class="line">
<div class="circle"></div>
</div>

Simply add these to your circle class:
position: relative;
top: -20px;

Look at this one https://jsfiddle.net/pgcft3z7/7/
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:relative;
top: -65px;
left: 0;
}
.container {
margin-top: 100px;
border: solid 1px;
border-color: red;
}
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>