css 글머리 기호 직접 구현

이재원·2021년 11월 1일
0

특정 문자로(*)글머리 기호 직접 구현

  • li 태그에서 자동으로 완성되는 글머리 기호를 제거 후 직접 구현 한다.

<template>
  <div id="app">
    <div class="box">
      <ol class="model-description">
        <li v-for="(item,index) in list" :key="index" v-html="item">
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      list:[
        '안녕하세요 안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요<br>안녕하세요안녕하세요<br>안녕하세요 ',
        `웹 페이지에서 사용자로부터 특정 이벤트나 입력 값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어.<br>'
        사용자 경험을 향상시키기 위한 방법으로 주로 사용된다. 일반적으로 HTML 문서에 내재되며, 브라우저에서 실행된다.`,        
      ]
    }
  },
}
</script>

<style>
.box{
  width: 360px;  
}
.model-description{
  padding-left: 15px;
  font-size: 15px;    
}

li{    
  word-break: break-all;
  position: relative;
  list-style: none;
}  

li::before{  
  content: '*';  
  position: absolute;
  top: 0;
  left: -11px;
}
</style>

0개의 댓글