2015-01-07 2 views
0

줄 자체 옆에 나타나는 줄 요소에 대한 데이터 정보를 표시하려고하는데이를 사용하여이를 수행 할 수 있습니다. :: before 의사 선택기.한 줄에 여러 요소에 대한 정보를 표시하기 위해 CSS에서 하나의 이전 의사 (pseudo) 선택자가 있음

하지만이 문제는 같은 선에있는 두 개의 개별 요소에 대한 정보를 표시하려는 경우 해당 선택기가 서로 겹치기 전에 발생합니다. 그리고 심지어 내가 그들을 분리 할 수 ​​있다면 하나의 요소에있는 각 라인에 대해 이런 종류의 정보 (라인에서 발생할 수있는 수많은 html 요소의 데이터)를 보여주는 다른 신뢰할 수있는 방법이 있을지 궁금합니다. 나는 그 라인에 대한 수집 된 정보를 보여지게되는 요소에 마우스를 가져

예를 들면 다음과 같습니다.

<p> "Neque porro quisquam est <span data-info="1">qui</span> dolorem <span data-info="2">ipsum</span> quia dolor sit amet, consectetur, adipisci velit..."</p>

위의이 텍스트를 가정하고, 어떻게 든 동적으로 생성하는 하나의 라인을 찾고있다 엘레멘트 이 행에있는 데이터 목록 ("info")을 표시 할 행 앞에 "1", "2" '를 입력하십시오.

내 마음에 오는 한 가지 방법은 각 행을 새로운 html 요소로 감싸고 해당 html 요소 자체에 내용에 대한 정보를 수집하고 해당 요소에 대해 전에 표시하는 것입니다. 나는 그것이 심지어 실현 가능할 지조차 확신하지 못한다.

나는 다른 종류의 솔루션에 대해서도 열려 있기 때문에, 전에는 사용할 필요가 없습니다.

감사합니다.

답변

0

'데이터 정보'데이터를 다른 html 요소에 동적으로 표시하려고합니까? 내가 너를 올바르게 이해했다면 CSS로 이것을 달성 할 수 없다.

'data-info'정보가 정적 인 경우 (:: before 유사 요소의 content 속성에서 사용할 수 있습니까?) CSS를 사용하여이 작업을 수행 할 수 있습니다.

관련 문제