css 로 번역 적용하기

 

 

div안의 내용을 비우고 css의 ::after 로 언어별 번역을 추가하는 방식으로 언어별 번역을 추가할 수 있다. 

 

::after (:after)
CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

 

css element + :lang(언어코드)::after {}안의 언어별로 번역을 넣어준다. 

 

 

php 

 

<div id="add-bottom-button" data-type="continue"></div>

 

css 

 

/* 밑바닥 버튼*/
#add-bottom-button[data-type="continue"]:lang(en)::after {
    content: 'Continue';
}
#add-bottom-button[data-type="continue"]:lang(ko)::after {
    content: '계속';
}
#add-bottom-button[data-type="continue"]:lang(ja)::after {
    content: '続き';
}
#add-bottom-button[data-type="continue"]:lang(zh)::after {
    content: '继续';
}

 

다른 예시

 

기존 번역에 추가를 할경우 css에 , 로 새로운 css path를 추가한다. 

 

php

 <div id="add-more-type-dropdown" class="dropdown">
            <div class="items status">
                <div class="item" data-value="cat"></div>
            </div>
        </div>

 

css

 

html:lang(ko) .card-parent .cards .card[data-type="cat"] .card-content header h5::after ,
#add-more-type-dropdown .items .item[data-value="dog"]:lang(ko)::after {
    content: '고양이';
}
html:lang(en) .card-parent .cards .card[data-type="cat"] .card-content header h5::after,
#add-more-type-dropdown .items .item[data-value="cat"]:lang(en)::after{
    content: 'CAT';
}
html:lang(ja) .card-parent .cards .card[data-type="cat"] .card-content header h5::after,
#add-more-type-dropdown .items .item[data-value="cat"]:lang(ja)::after{
    content: '猫';
}
html:lang(zh) .card-parent .cards .card[data-type="cat"] .card-content header h5::after,
#add-more-type-dropdown .items .item[data-value="cat"]:lang(zh)::after{{
    content: '猫';
}