css, маркерованый список ul li, задать округление бордеру
.guideIntro span, .h1-custom-blog h1{
font-family: 'Gilroy-Medium', sans-serif !important;
}
.h1-custom-blog h1{
text-transform: capitalize;
}
.headerContainer h2 a{
color: #1a8dcd;
margin: 15px auto 25px;
font-family: 'Gilroy-Semibold', sans-serif !important;
}
.headerContainer h2 a:hover, .articleContainer a:hover{
color: #ef7000;
}
.icon.icon-chevron{
width: 14px;
height: 14px;
border-top: 2px solid #1a8dcd;
border-right: 2px solid #1a8dcd;
margin-top: 20px;
margin-right: 16px;
float: left;
transform: rotate(45deg);
}
.categoryBlock{
border: 2px solid #ccc;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem;
margin: .75rem 0;
width: 100%;
}
.categories-custom-block{
display: flex;
flex-direction: column;
width: 100%;
}
.articleContainer{
display: flex;
flex-wrap: wrap;
line-height: 1.78em;
margin-left: 15px;
}
.categories-custom-block ul.content-list>li{
list-style: none;
margin-left: 13px;
padding: 8px 0 0 15px;
position: relative;
}
.articleContainer ul.content-list>li{
border-left: 2px solid #1a8dcd;
flex-grow: 1;
padding: 8px 23px!important;
}
.articleContainer ul.content-list{
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: wrap;
margin: 0;
width: 50%;
}
.articleContainer a{
color: #666;
font-size: 1.2rem;
font-family: 'gilroy-semibold', sans-serif !important;
}
@media (max-width: 767px){
.articleContainer ul.content-list {
width: 100%;
}
}
<div class="categories-custom-block"><div class="categoryBlock"><div class="headerContainer"><h2><a href="#"><div class="icon icon-chevron"></div>Uncategorized</a></h2><div class="articleContainer"><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li><li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li><li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li><li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li></ul><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li></ul></div></div></div></div>
Я пытаюсь по левой стороне сделать округление для бордера, на сколько я понял это должен сделать position:relative, но это не срабатывает. Как правильно это реализовать?
Что я хочу получить
Что выходит у меня
Ответы (2 шт):
Автор решения: Vladimir Gonchar
→ Ссылка
Магическим образом ничего происходить не будет. Уж тем более если маркеры Вы через CSS убрали (list-style: none;). Такие маркеры всегда рисуются самостоятельно через :before или :after.
.guideIntro span,
.h1-custom-blog h1 {
font-family: 'Gilroy-Medium', sans-serif !important;
}
.h1-custom-blog h1 {
text-transform: capitalize;
}
.headerContainer h2 a {
color: #1a8dcd;
margin: 15px auto 25px;
font-family: 'Gilroy-Semibold', sans-serif !important;
}
.headerContainer h2 a:hover,
.articleContainer a:hover {
color: #ef7000;
}
.icon.icon-chevron {
width: 14px;
height: 14px;
border-top: 2px solid #1a8dcd;
border-right: 2px solid #1a8dcd;
margin-top: 20px;
margin-right: 16px;
float: left;
transform: rotate(45deg);
}
.categoryBlock {
border: 2px solid #ccc;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem;
margin: .75rem 0;
width: 100%;
}
.categories-custom-block {
display: flex;
flex-direction: column;
width: 100%;
}
.articleContainer {
display: flex;
flex-wrap: wrap;
line-height: 1.78em;
margin-left: 15px;
}
.categories-custom-block ul.content-list>li {
list-style: none;
margin-left: 13px;
padding: 8px 0 0 15px;
position: relative;
}
.articleContainer ul.content-list>li {
border-left: 2px solid #1a8dcd;
flex-grow: 1;
padding: 8px 23px!important;
}
.articleContainer ul.content-list>li:before {
width: 7px;
height: 7px;
border-radius: 50%;
border: 2px solid #1a8dcd;
position: absolute;
content: '';
left: -7px;
display: block;
top: 16px;
background: #fff;
}
.articleContainer ul.content-list {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: wrap;
margin: 0;
width: 50%;
}
.articleContainer a {
color: #666;
font-size: 1.2rem;
font-family: 'gilroy-semibold', sans-serif !important;
}
@media (max-width: 767px) {
.articleContainer ul.content-list {
width: 100%;
}
}
<div class="categories-custom-block">
<div class="categoryBlock">
<div class="headerContainer">
<h2>
<a href="#">
<div class="icon icon-chevron"></div>Uncategorized</a>
</h2>
<div class="articleContainer">
<ul class="content-list">
<li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li>
</ul>
<ul class="content-list">
<li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li>
<li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li>
</ul>
</div>
</div>
</div>
</div>
Автор решения: Alexey Vladimirov
→ Ссылка
Думаю, что .content-list > li:before вполне можно применить:
.content-list > li:before {
--bullet-radus:0.3em;
content:'';
position: absolute;
top:1em;
left:calc(-1px - var(--bullet-radus));
width: calc(var(--bullet-radus) * 2);
height: calc(var(--bullet-radus) * 2);
border: solid 2px #1a8dcd;
background-color: white;
border-radius:50%;
box-sizing:border-box;
}
/*------------------------------------------------------*/
.guideIntro span, .h1-custom-blog h1{
font-family: 'Gilroy-Medium', sans-serif !important;
}
.h1-custom-blog h1{
text-transform: capitalize;
}
.headerContainer h2 a{
color: #1a8dcd;
margin: 15px auto 25px;
font-family: 'Gilroy-Semibold', sans-serif !important;
}
.headerContainer h2 a:hover, .articleContainer a:hover{
color: #ef7000;
}
.icon.icon-chevron{
width: 14px;
height: 14px;
border-top: 2px solid #1a8dcd;
border-right: 2px solid #1a8dcd;
margin-top: 20px;
margin-right: 16px;
float: left;
transform: rotate(45deg);
}
.categoryBlock{
border: 2px solid #ccc;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem;
margin: .75rem 0;
width: 100%;
}
.categories-custom-block{
display: flex;
flex-direction: column;
width: 100%;
}
.articleContainer{
display: flex;
flex-wrap: wrap;
line-height: 1.78em;
margin-left: 15px;
}
.categories-custom-block ul.content-list>li{
list-style: none;
margin-left: 13px;
padding: 8px 0 0 15px;
position: relative;
}
.articleContainer ul.content-list>li{
border-left: 2px solid #1a8dcd;
flex-grow: 1;
padding: 8px 23px!important;
}
.articleContainer ul.content-list{
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: wrap;
margin: 0;
width: 50%;
}
.articleContainer a{
color: #666;
font-size: 1.2rem;
font-family: 'gilroy-semibold', sans-serif !important;
}
@media (max-width: 767px){
.articleContainer ul.content-list {
width: 100%;
}
}
<div class="categories-custom-block"><div class="categoryBlock"><div class="headerContainer"><h2><a href="#"><div class="icon icon-chevron"></div>Uncategorized</a></h2><div class="articleContainer"><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li><li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li><li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li><li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li></ul><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li></ul></div></div></div></div>

