(워드프레스) <hr/> CSS 스타일 변경

기본 스타일의 수평선은 너무 짧고 , 까맣고, 잘 보이지 않습니다.

세 가지 스타일을 아래처럼 바꿔봅니다.

hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 90%;
    max-width: 90%;
    border: 0;
    height: 2px;
    background: linear-gradient(to right, #f6f6f6, var(--wp--preset--color--primary), #f6f6f6);
    margin: 35px auto;
}
hr.wp-block-separator.is-style-wide {
    width: 100%;
    max-width: 100% ;
    border: 0;
    height: 2px;
    background:  linear-gradient(to right, var(--wp--preset--color--link-hover), rgba(0,0,0,0.5));
}

hr.wp-block-separator.is-style-dots {
    overflow: visible; 
    padding: 0; 
    height: 30px; 
    width: 90%; 
    max-width: 90%; 
    border: 0; 
    text-align: center; 
    margin: 35px auto;
}
hr.wp-block-separator.is-style-dots::before {
    content: "● ● ●"; 
    display: inline-block; 
    position: relative; 
    font-size: 1.3em; 
    padding: 0 0.5em; 
    background: -webkit-linear-gradient(var(--wp--preset--color--primary), rgba(0,0,0,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

테마에 등록된 변수명으로 변경하거나 색상을 지정합니다.