How to create a divider with a circle using css and html

[tapesh]

hi am trying to create a divider with a circle such that it align side by side with the degree name by using a simple HTML and CSS approach

however, I got the result the way I want but am not sure if this is the correct way as this is also not responsive.

Please see the image below, which I have designed using Adobe Xd, and this is the end result am trying to create.

Please see my trail result and the source code below:

react JSX code

 <Box className="education-section">
                            <Box className="education-divider">
                                <Divider orientation="vertical" />
                            </Box>
                            <Box className="education-details">
                                <div className="circle"> </div>
                                <div className="not-circle">
                                    <p className="education-degree">masters</p>
                                    <p className="education-year"> 2017/2019</p>
                                    <p className="education-location">Dublin business school</p>
                                </div>
                                <div className="circle"> </div>
                                <div className="not-circle">
                                    <p className="education-degree">masters</p>
                                    <p className="education-year"> 2017/2019</p>
                                    <p className="education-location">Dublin business school</p>
                                </div>
                                <div className="circle"> </div>
                                <div className="not-circle">
                                    <p className="education-degree">masters</p>
                                    <p className="education-year"> 2017/2019</p>
                                    <p className="education-location">Dublin business school</p>
                                </div>
                            </Box>

CSS code

.circle {
    width: 17px;
    height: 17px;
    background-color: rgb(255, 0, 0);
    border-radius: 50%;
    z-index: -2;
    margin-left: -16%;
}
.not-circle {
    margin-top: -30px;
    margin-left: 1.5vw;
}

codesand box link for source code click to see source code and demo

[ALLESS]

If you have a Codepen link for this, you can leave it here. If not, I can create One for you.

[tapesh]

Hi @ALLESS I do not have a code pen created for this could you please give me proper solution if you do not mind.

codesand box link for source code click to see source code and demo

Thanks

[jackson]

.circle {
    width: 300px;
    height: 300px;
    background: green;
    border-radius: 50%;
        position: relative;
}
.circle:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    background: #fff;
    right: 0;
    left: 0;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: rotate(-66deg);
    -moz-transform: rotate(-66deg);
    -o-transform: rotate(-66deg);
    -ms-transform: rotate(-66deg);
    transform: rotate(-66deg);
}

[tapesh]

Thanks @jackson will give it a try and see

[tapesh]

Hi @jackson

Please have a look at the below result, this is something else