Draw Circle using css alone
You could use a .before with a content with a unicode symbol for a circle (25CF).
.circle:before { content: ' \25CF'; font-size: 200px;}<span class="circle"></span>How to draw circle in html page?
You can't draw a circle per se. But you can make something identical to a circle.
You'd have to create a rectangle with rounded corners (via border-radius) that are one-half the width/height of the circle you want to make.
#circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: red; }<div id="circle"></div>How to draw a circle with text in the middle?
Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.
Example
JSFiddle
.circle {
width: 500px;
height: 500px;
line-height: 500px;
border-radius: 50%;
font-size: 50px;
color: #fff;
text-align: center;
background: #000
}<div class="circle">Hello I am A Circle</div>Draw Circle with connected line responsive
You can use grid to change the positioning of elements without having to change the HTML.
This snippet takes the basic idea from the code in the question of using a pseudo element to draw a line to the next element.
With a media query it changes the grid layout to have fewer items in a row and 'swivels' this line round for some edge elements.
Of course you will want to alter the dimensions of things and the media break points to suit your particular use case. This snippet breaks at 600px width and uses vw as the unit so that things are responsive.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
width: 90vw;
margin: 0 auto;
}
.circles {
width: 100%;
display: grid;
--cols: 11;
grid-template-columns: repeat(var(--cols), 1fr);
--gap: 4vw;
gap: var(--gap);
}
.circles>* {
width: 100%;
background-color: navy;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1 / 1;
display inline-block;
position: relative;
}
.circles>*::after {
content: '';
position: absolute;
width: var(--gap);
height: 1px;
background-color: navy;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
.circles>*:last-child::after {
display: none;
}
@media (max-width: 600px) {
.circles {
--cols: 5;
}
.circles>*:nth-child(5)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(6) {
grid-column: 5;
grid-row: 2;
}
.circles>*:nth-child(6)::after {
display: none;
}
.circles>*:nth-child(7) {
grid-column: 4;
grid-row: 2;
}
.circles>*:nth-child(8) {
grid-column: 3;
grid-row: 2;
}
.circles>*:nth-child(9) {
grid-column: 2;
grid-row: 2;
}
.circles>*:nth-child(10) {
grid-column: 1;
grid-row: 2;
}
.circles>*:nth-child(11)::after {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
}
}<div class="container">
<ul class="circles">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>Using before CSS, add circle in the background
.swiper-button-next:before { content: ''; display: inline-block; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; background-color: #060606; margin-left: -53px; margin-top: -11px; opacity: 0.8; z-index: -2; position: relative;}
.swiper-button-next { height: 25px; padding-left: 62px; padding-top: 0px; margin-top: -13px; z-index: 4 !important; position: absolute; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; top: 50%; width: 27px; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat;}.arrow{ width: auto; display: inline-block; position: absolute; z-index: 9999; left: 31px; vertical-align: middle; color: #ffffff; opacity: 0.3; font-size:20px;}<div class="swiper-button-next swiper-button-white"><div class="arrow">❯<div></div>Draw dynamic Circle with connected line responsive
If you know what break points you want (ie at what width you want to have what number of columns) this can be done in pure CSS.
This snippet has two sets. The first is for widths >600px and the second for widths <=600px with 10 columns per row in the first set and 5 columns per row in the second set.
It uses a grid and reverses the order of columns occupied by alternate rows using the CSS nth-child facility.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
}
.container {
display: flex;
justify-content: center;
width: 90vw;
margin: 0 auto;
}
.circles {
width: 100%;
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
--gap: 4vw;
gap: var(--gap);
grid-auto-flow: dense;
}
.circles>* {
width: 100%;
background-color: navy;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1 / 1;
display inline-block;
position: relative;
}
.circles>*::after {
content: '';
position: absolute;
width: var(--gap);
height: 1px;
background-color: navy;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
@media (min-width: 600px) {
.circles {
--cols: 10;
}
.circles>*:nth-child(20n-10)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(20n-9) {
grid-column: 10;
}
.circles>*:nth-child(20n-9)::after {
display: none;
}
.circles>*:nth-child(20n-8) {
grid-column: 9;
}
.circles>*:nth-child(20n-7) {
grid-column: 8;
}
.circles>*:nth-child(20n-6) {
grid-column: 7;
}
.circles>*:nth-child(20n-5) {
grid-column: 6;
}
.circles>*:nth-child(20n-4) {
grid-column: 5;
}
.circles>*:nth-child(20n-3) {
grid-column: 4;
}
.circles>*:nth-child(20n-2) {
grid-column: 3;
}
.circles>*:nth-child(20n-1) {
grid-column: 2;
}
.circles>*:nth-child(20n) {
grid-column: 1;
}
.circles>*:nth-child(20n-8):last-child::after,
.circles>*:nth-child(20n-7):last-child::after,
.circles>*:nth-child(20n-6):last-child::after,
.circles>*:nth-child(20n-5):last-child::after,
.circles>*:nth-child(20n-4):last-child::after,
.circles>*:nth-child(20n-3):last-child::after,
.circles>*:nth-child(20n-2):last-child::after,
.circles>*:nth-child(20n-1):last-child::after,
.circles>*:nth-child(20n):last-child::after {
display: inline-block;
}
.circles>*:nth-child(20n+1)::before {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
content: '';
position: absolute;
background-color: navy;
}
}
@media (max-width: 600px) {
.circles {
--cols: 5;
}
.circles>*:nth-child(10n-5)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(10n-4) {
grid-column: 5;
}
.circles>*:nth-child(10n-4)::after {
display: none;
}
.circles>*:nth-child(10n-3) {
grid-column: 4;
}
.circles>*:nth-child(10n-2) {
grid-column: 3;
}
.circles>*:nth-child(10n-1) {
grid-column: 2;
}
.circles>*:nth-child(10n) {
grid-column: 1;
}
.circles>*:nth-child(10n-3):last-child::after,
.circles>*:nth-child(10n-2):last-child::after,
.circles>*:nth-child(10n-1):last-child::after,
.circles>*:nth-child(10n):last-child::after {
display: inline-block;
}
.circles>*:nth-child(10n+1)::before {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
content: '';
position: absolute;
background-color: navy;
}
}
.circles>*:first-child::before,
.circles>*:last-child::after {
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="circles">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
</div>
</body>
</html>How can I make a circle using css and apply it to my header?
You're correct in using the :after pseudo-class. My assumption is that you possibly forgot to specify the content: '' attribute.
So first, you're going to want to create a block and position it at the bottom of your header:
header { position: relative; }
header:after {
content: '';
display: block;
height: 44px;
margin-left: -22px;
position: absolute;
left: 50%;
bottom: -22px; // Pull it out to half of its size for the semi-circle look
width: 44px;
}
Then make it circular using border-radius:
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
Final code:
header:after {
content: '';
display: block;
height: 44px;
margin-left: -22px;
position: absolute;
left: 50%;
bottom: -22px; // Pull it out to half of its size for the semi-circle look
width: 44px;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
}
Related Topics
How to Horizontally Center an Unordered List of Unknown Width
How to Embed a Google Drive Folder in a Website
Is Cross-Origin Postmessage Broken in Ie10
What Is the ::Content/::Slotted Pseudo-Element and How Does It Work
How to Make a Chevron Arrow Using CSS
Setting a Width and Height on an a Tag
Low Latency (< 2S) Live Video Streaming HTML5 Solutions
Why Cannot Change Checkbox Color Whatever I Do
Using HTML in Jquery UI Autocomplete
Is It Correct to Use Alt Tag for an Anchor Link
Is It Considered Bad Practice to Use Absolute Positioning
How to Change the Default Index Page in Apache
Conditional HTML Attributes Using Razor MVC3
Highlight the Navigation Menu for the Current Page
Get Rid of Space Underneath Inline-Block Image
How to Make Div's Percentage Width Relative to Parent Div and Not Viewport