css 앞뒤 고정하기 ::before, ::after

css 문장 고정하기 ::before, ::after

"나의 이름을"을 앞에 고정하고

"입니다" 를 뒤에 고정한 후 

이름만 고쳐서 넣을 수 있게 하는 코드는 아래와 같습니다.

<style>
  <-- 앞 문장 고정 -->
  .name::before {
  content: "나의 이름은";
  margin-right: 5px;
  }
  <-- 뒤 문장 고정 -->
  .name::after {
  content: "입니다 ";
  margin-left: 5px;
  }
</style>


<div class="name">홍길동</div>
<div class="name">김철수</div>

 

코드 실행 결과는 아래와 같습니다.

홍길동

김철수

 

 

이름, 전화번호, 주소에도 적용하 코드 예시는 아래와 같습니다.

See the Pen ::before 1 after1 by hyunho (@momalcy) on CodePen.