The latest articles on DEV Community by mommocmoc (@mommocmoc). https://dev.to/mommocmoc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F186330%2Fd2ab90a1-ab65-4fd8-9a4f-aa2e5ca86eab.png https://dev.to/mommocmoc en mommocmoc Mon, 23 Aug 2021 14:23:53 +0000 https://dev.to/mommocmoc/answer-how-to-change-the-length-position-of-text-decoration-underline-2oii https://dev.to/mommocmoc/answer-how-to-change-the-length-position-of-text-decoration-underline-2oii <div class="ltag__stackexchange--container"> <div class="ltag__stackexchange--title-container"> <div class="ltag__stackexchange--title"> <h1> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Gn-iPj_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackoverflow-logo-b42691ae545e4810b105ee957979a853a696085e67e43ee14c5699cf3e890fb4.svg" alt=""> <a href="https://stackoverflow.com/questions/51521478/how-to-change-the-length-position-of-text-decorationunderline/51521577#51521577" rel="noopener noreferrer"> <span class="title-flare">answer</span> re: How to change the length/position of text-decoration:underline? </a> </h1> <div class="ltag__stackexchange--post-metadata"> <span>Jul 25 '18</span> </div> </div> <a class="ltag__stackexchange--score-container" href="https://stackoverflow.com/questions/51521478/how-to-change-the-length-position-of-text-decorationunderline/51521577#51521577" rel="noopener noreferrer"> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y9mJpuJP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-up-eff2e2849e67d156181d258e38802c0b57fa011f74164a7f97675ca3b6ab756b.svg" alt=""> <div class="ltag__stackexchange--score-number"> 5 </div> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wif5Zq3z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/stackexchange-arrow-down-4349fac0dd932d284fab7e4dd9846f19a3710558efde0d2dfd05897f3eeb9aba.svg" alt=""> </a> </div> <div class="ltag__stackexchange--body"> <p>Use gradient and you can easily adjust size and position:</p> <div class="snippet" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.underline { background-image: linear-gradient(#5fca66, #5fca66); background-position: bottom center; /*Adjust the background-position to move the line*/ background-size: 80% 2px; /*Adjust the background size to control length and height*/ background-repeat: no-repeat; padding-bottom: 4px; /* this can also control the position</code></pre>…</div> </div> </div> <div class="ltag__stackexchange--btn--container"> <a href="https://stackoverflow.com/questions/51521478/how-to-change-the-length-position-of-text-decorationunderline/51521577#51521577" rel="noopener noreferrer">Open Full Answer</a> </div> </div> <p>텍스트 데코레이션은 텍스트 길이에 맞게 길이가 제한됨<br> =&gt; 이 방법으로 원하는 길이/위치/두께 조절이 비교적 쉽고빠름</p>