React Html CSS로 텍스트 밑줄 색 커스텀 하기, custom span text wavy curly underline color

 

 

정말 초초초초 간단하게 react, html에서 css로 misspell 혹은 틀린 글자 등 아래에 wavy underline, 즉 밑줄이 보이게 하는 코드입니다!

span 전체 코드 :

<span style={{cursor:'pointer', textDecoration: 'underline wavy #F8C471'}}>
    {text.children}
</span>

 

즉,

textDecoration: 'underline wavy 원하는컬러코드(ex: #FFFFFF, red, black 등)'

이부분만 추가해주시면 됩니다 ㅎㅎ

 

 

 

 

완성!!! 끝입니다!!!! 

저는 Draft.js를 사용중인데, 모든 editor에 대해 맨 앞글자만 해당 스타일이 적용되도록 구현한 결과입니다.

 

 

 

 

참고로 저는 저 부분을 클릭할 수 있게 해야해서,

hover했을 때 포인터 모양을 바꿔주기 위해 cursor: 'pointer'를 추가해줬어요!

 

참고 : https://stackoverflow.com/questions/6821365/how-to-put-a-waved-line-under-misspelled-words-html