เอฟเฟกต์ที่เราต้องการบรรลุคือการเพิ่มไอคอนขนาดเล็กลงในลิงก์ทั้งหมดที่ชี้ไปที่ไซต์นี้เพื่อบอกผู้ใช้ว่าการคลิกที่ลิงค์นี้จะทำให้คุณออกจากไซต์นี้ซึ่งเป็นลิงค์ภายนอก แน่นอนว่าสิ่งนี้อาจเกิดขึ้นได้จาก JavaScript ที่ซับซ้อนมากขึ้น แต่ตอนนี้เราสามารถใช้ฟังก์ชั่นนี้ผ่านตัวเลือกคุณสมบัติ CSS 3
A [href^=” http:”] {
ความเป็นมา: URL (images/externallink.gif) ไม่ต้องทำซ้ำด้านบนขวา;
Padding-Right: 10px;
-
รหัสด้านบนหมายถึง: ลิงก์ทั้งหมดที่เริ่มต้นด้วย HTTP: จะมีไอคอนลูกศรขนาดเล็กทำให้ผู้ใช้เป็นลิงค์ภายนอกและผู้ใช้จะออกจากเว็บไซต์นี้โดยคลิก อาจกล่าวได้ว่าฟังก์ชั่นนี้ใช้งานง่ายมากและเน้นความสะดวกในการใช้การออกแบบเว็บ
แน่นอนว่านี่คือลิงก์ไปยังเว็บไซต์นี้ที่ใช้ที่อยู่สัมพัทธ์ จะเกิดอะไรขึ้นถ้าลิงก์ไปยังไซต์นี้เริ่มต้นด้วย HTTP :, หรือถ้าใช้ทั้งที่อยู่สัมบูรณ์และที่อยู่สัมพัทธ์? เราสามารถใช้รหัสต่อไปนี้:
A [href^=” http:”] {
ความเป็นมา: URL (images/externallink.gif) ไม่ต้องทำซ้ำด้านบนขวา;
Padding-Right: 10px;
-
a [href*=” www.dudo.org”] {
ความเป็นมา: ไม่มี;
Padding: 0;
-
กฎสองข้อข้างต้นคือ: ไอคอนทั้งหมดที่เริ่มต้นด้วย http: จะถูกเพิ่มด้วยลิงก์ภายนอกตามด้วย http://www.dudo.org/ และไม่ได้ใช้ดังนั้นพวกเขาจึงสัมพันธ์กับที่อยู่ตามธรรมชาติเพราะพวกเขาไม่ได้ เริ่มต้นด้วย HTTP
ที่มา: http://www.dudo.org/article/cssjs/use_new_tech_of_css.htm